How to put just a value from a radio input into an array in Vuejs and Vuex

Question

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>

I'm working on a quiz app and I'm using Vuex for state management. I'm having four radio values (answers) for each question and I want to be putting just the last selected value (answer) into an array that's in my Vuex state, it's working fine but whenever the use chooses another radio input (from the same question) it enters the array too, whereas I want only the selected value from each question (no matter the number of toggle in the options).

My "questions" array of 10(in length) in the state looks like this:

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"
            ]
}
...
   }

and my template looks like this:

<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>
```

and my mutation looks like this:

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>

I've been on this for weeks but I've not gotten it. How do I do it?

Rajeev Radhakrishnan · Accepted Answer · 2019-10-13 15:00:24Z

1

Logics for putting the answer into the array

Check whether the answer already inputted or not using the array index
If exists remove the old one and insert the latest choice

Here the code for the above logics

  // 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);

answered Oct 13, 2019 at 15:00

Rajeev Radhakrishnan

99410 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to put just a value from a radio input into an array in Vuejs and Vuex

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related