Динамически меняющееся состояние vue

Question

Для своего приложения я использую Vue -router и store для совместной работы. В моем штате я храню несколько вопросов. Содержание вопросов сохраняется в моем Магазине примерно так:

export default new Vuex.Store({
  state: {
    blabla: [
      {
        question: 'question1',
        answer: false,
        givenAnswer: null,
        disabled: false,
      },
      {
        question: 'question2',
        answer: false,
        givenAnswer: null,
        disabled: false
      }
    ],
    score: null
  },
  getters: {
    getQuestionList: state => {
      return state.questions;
    }
  })

И, конечно, с другим конфигом, но это все работает нормально. Я получаю эти данные через Getter в моем шаблоне Vue, используя этот код в моем Компоненте:

export default {
  data() {
    return {
      questionId: this.$route.params.id - 1
    }
  },
  computed: {
    getQuestions () {
      return this.$store.getters.getQuestionList
    }
  }
}

<p>{{ getQuestions[questionId].question }}</p>

Теперь я хочу динамически изменять состояние каждого вопроса на disabled:false всякий раз, когда кто-то отвечает на вопрос, чтобы дать возможность ответить на следующий вопрос. Однако я не могу понять, как именно это сделать.

Может кто-то направить меня в правильном направлении? Спасибо!

Изменить для уточнения: Существует список из 10 вопросов, и при запуске включается только первый из них при запуске. Когда вы отвечаете на вопрос 1, вопрос 2 должен быть включен (вопрос один также остается включенным), когда вы отвечаете на вопрос 2, вопрос 3 должен быть включен, и т. Д. c.

Answer 1

в вашем магазине поместите этот код мутации:

mutations: {
    enable (state) {
    state.questions.forEach(item => {
      item.disabled = false
    )}
  }
}

и в своем компоненте вы можете легко зафиксировать эту мутацию следующим образом:

this.$store.commit('enable')

Answer 2

Вы можете просто зафиксировать мутацию, которая устанавливает disabled: false для указанного элемента:

Cmponent

<button @click="submitQuestion(question.id)"></button>

methods: {
  submitQuestion (id) {
    // ...
    this.$store.commit('ENABLE_QUESTION', id + 1) // passing id of the next question
  }
}

Store

state: {
  questions: [
    {
      id: 0,
      question: 'question1',
      answer: false,
      givenAnswer: null,
      disabled: false,
    },
    {
      id: 1,
      question: 'question2',
      answer: false,
      givenAnswer: null,
      disabled: false
    }
  ]
}

...

mutations: {
  ENABLE_QUESTION (state, id) {
    let questionIndex = state.questions.findIndex(item => item.id === id)
    state.questions[questionIndex].disabled = false
  }
}