Как поместить только значение с радиовхода в массив в Vuejs и Vuex - PullRequest
Новая
       57

Как поместить только значение с радиовхода в массив в Vuejs и Vuex

1 голос
/ 13 октября 2019 

state: {
		questions: [
		{
			"id": 1,
			"name": "q1",
			"category": "English Language",
			"type": "multiple",
			"question": "What is a name of any person, animal, place, thing and feeling?",
			"correct_answer": "Noun",
			"incorrect_answers": [
			"Pronoun",
			"Noun",
			"Adverb",
			"Adjective"
			]
		}
    ]
    answer = "",
    answer = []
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Я работаю над приложением викторины и использую Vuex для управления состоянием. У меня есть четыре значения радио (ответы) для каждого вопроса, и я хочу поместить только последнее выбранное значение (ответ) в массив, который находится в моем состоянии Vuex, он работает нормально, но всякий раз, когда использование выбирает другой вход радио (изтот же вопрос) он также входит в массив, в то время как я хочу только выбранное значение из каждого вопроса (независимо от количества переключений в опциях).

Мой массив «вопросов» 10 (в длину) всостояние выглядит так: 

state: {
        questions: [
            {
            "id": 1,
            "name": "q1",
            "category": "English Language",
            "type": "multiple",
            "question": "What is a name of  person, animal, place or thing?",
            "correct_answer": "Noun",
            "incorrect_answers": [
            "Pronoun",
            "Noun",
            "Adverb",
            "Adjective"
            ]
}
...
   }

и мой шаблон выглядит так: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
```
<div class="card-text ml-4" v-for="(answer, index) in question.incorrect_answers" :key="index" >
  <label class="form-check-label">
    <!-- <input type="radio" name="answer" class="mb-2" v-model="getAnswers[index]" :value="answer"> {{answer}} -->
    <input type="radio" :name="question.name" class="mb-2" :value="answer" @change.stop="newAnswer(question.id, answer)" /> {{answer}}
  </label> <!-- work on postanswer -->
</div>
```

и моя мутация выглядит так: 

mutations:{
		ANSWER(state, id, ans){
			state.answer = id;
			if(id === "q1"){
				state.answers.push(state.answer);
			} else {

			}
		}
 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

Я занимаюсь этим уже несколько недель, но не получил этого. Как мне это сделать?

1 Ответ

0 голосов
/ 13 октября 2019

Логика для помещения ответа в массив

  1. Проверьте, уже введен ответ или нет, используя индекс массива
  2. Если существует, удалите старый и вставьте последний выбор

Вот код для вышеуказанной логики 

  // Trying to find index of chosed answer
  const indexOfExistingChoice = this.choosedAnswers.findIndex(
    answer => answer.id === selectedAnswer.id
  );

  if (indexOfExistingChoice >= 0) {
    // Choice already selected
    // Removing the choice from the array
    this.choosedAnswers.splice(indexOfExistingChoice, 1);        
  }

  // Pushing into the array
  this.choosedAnswers.push(selectedAnswer);
...