Reputation: 855
I have a quiz with three different answers (2 wrong and 1 correct). I can set the radio buttons properly, and I see the three answers, but just two of the three are clickable.
Are radio buttons thought just for two clickable elements? It seems strange to me. The
<template>
<div class="quizForm" :key="componentKey">
<div class="quizQuestContainer">
<div v-for="(question, index) in quiz.questions"
:key = index
>
<!-- Hide all questions, show only the one with index === to current question index -->
<div class="quizQuestion" v-if="index === questionIndex">
<h2> Domanda {{ questionIndex+1 }}</h2>
<p class="question"> {{ question.text }} </p>
<ol>
<li v-for="(response, index) in question.responses"
:key = index
>
<label>
<input type="radio"
:value="[response.res_value === true]"
:name="response.res_number"
v-model="userResponse"
> {{response.res_text}}
</label>
</li>
</ol>
<div class="quizQuestion" v-if="questionIndex === quiz.questions.length">
</template>
<script>
import sourceData from '@/data.json'
export default {
data(){
return {
componentKey: 0,
questionIndex: 0,
userResponse: null, //this is the present radio selection
correctAnswers: [] //this is the array of selected answers
}
},
computed:{
quiz(){
return sourceData.quizzes.find(quiz =>quiz.id === parseInt(this.id))
},
}
</script>
In the data.json I have this structure:
"questions": [
{
"text": "Questoin?",
"responses": [
{"res_text": "Answer",
"res_number": 0,
"res_value": false
},
{"res_text": "Answer",
"res_number": 0,
"res_value": true
},
{"res_text": "Answer",
"res_number": 0,
"res_value": false
}
]
},
{
"text": "Question?",
"responses": [
{"res_text": "Answer",
"res_number": 1,
"res_value": true
},
{"res_text": "Answer",
"res_number": 1,
"res_value": false
},
{"res_text": "Answer",
"res_number": 1,
"res_value": false
}
]
}
etc.
Upvotes: 1
Views: 96
Reputation: 855
I found the problem: it was here
:value="[response.res_value === true]"
I was binding everything to the true value.
Upvotes: 1