Lara M.
Lara M.

Reputation: 855

Vue radio button, just two of three are clickable

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

Answers (1)

Lara M.
Lara M.

Reputation: 855

I found the problem: it was here

:value="[response.res_value === true]"

I was binding everything to the true value.

Upvotes: 1

Related Questions