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?

Answer 1

Logics for putting the answer into the array

1. Check whether the answer already inputted or not using the array index
2. 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);