Cannot clear radio button

[jayGorio]

I have this three components - main, question, and question option. What I want is to clear the checked radio button on the questionOption from the main component startNewGame method. When I’m only using the Main component resetting the radio button is just simple. I just assign the model to an empty array. Can someone help me on this? By the way, I’m using onsen UI for the customize tags and removed some unnecessary methods and data. Here is my code.

Main.vue

	<div class="quiz-background">

		<question 
			v-for="(question, $indexParent) in randomQuestions"
			:question="question['doc'].question"
			:choices="question['doc']['choices']"
			:indexParent="$indexParent"
			:correctAnswer="question['doc'].correctAnswer"
			@collectedAnswer="pushToAnswers"
		>				
		</question>

		<section style="margin:16px">
			<v-ons-button
				modifier="cta" 
				@click="submit" 
				v-show="!isDone"
			>Submit
			</v-ons-button>
		</section>

	</div>

    <script>

    export default {

	data() {

		return {

			dialogVisible: false,
			resultDialogVisible: false,
			questionnaires: [],
			chosenAnswers: [],
			correct: [],
			total: 0,
			isDone: false
		}
	},


	methods: {

		pushToAnswers(answer) {

			this.chosenAnswers.push(answer);
		},

		submit() {
			   //will compare chosenAnswers to correct answer
			}

		}, 

		startNewGame() {

			//will reset answered questions
			
			this.getQuestionaire();
			this.chosenAnswers = [];
			this.resultDialogVisible = false;
			this.total = 0;
			this.isDone = false;
		},

        components: {
		   Question
	    }
     }
    </script>

Question.vue

<question-option 
	v-for="(choice, key, $index) in choices" 
    :choice="choice" 
	:indexParent="indexParent" 
	:index="$index"
	:letter="key"
	:name="'question-' +  indexParent"
	v-model="selectedValue"
	@change="changeValue"
	>
</question-option>
<script>
import QuestionOption from './QuestionOption.vue';

export default {

	data() {
		return {
			selectedValue: ''
		}
	},

	props: ['question', 'indexParent', 'choices', 'chosenAnswer'],

	methods: {

		changeValue(newValue) {

			this.selectedValue = newValue;

			this.$emit('collectedAnswer', this.selectedValue);


		}
	},

	components: {
		QuestionOption
	}
}

</script>

Question.vue

<v-ons-list-item
   :modifier="longdivider"
   :key="letter"
   tappable
>
<label class="left">
<v-ons-radio	
   :name="name"
   :input-id="indexParent + '-' + index"
   v-model="chosenAnswer"
>	
</v-ons-radio>
</label>

<label 
   class="center" 
   :for="indexParent + '-' + index"		
>
  {{ letter }} . {{ choice }}
</label>

</v-ons-list-item>

<script>

export default {
	props: ['choice', 'indexParent', 'index', 'name', 'letter'],

	computed: {

		chosenAnswer: {
			get() {
				return this.letter;
			},

			set() {
				this.$emit('change', this.letter);
			}
		}

	}
}
</script>

[Fran Diox]

@jayGorio Hi! This is a pure Vue component communication issue. I’d recommend you reading and understanding their official docs if you didn’t yet.

Basically, you don’t have “two way bindings” in your chosenArray, only 1 way. You use events from the child to the parent to push new items to the array, but you don’t transfer information from the array itself down to the children. Therefore, even if you reset your array, it won’t change the children.You either need to call methods in the children to clear their radio buttons or rethink the communication strategy that you are using.

Also, I think your v-model="selectedValue" is not working very well.

[jayGorio]

@Fran-Diox Thanks. Yeah I read that one way binding. That’s why I used the events. I checked the v-model and it is not working and removed it on the question component. Thanks for that. Can you suggest me the correct way of clearing that radio button. As for now I’ m accessing the new method in the questionOption component

methods: {
      clear() {
             this.chosenAnswer = '';
      }
}