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>