CODEWITHSUNDEEP
vue.jsvue-component
deeformvp
deeformvp

Reputation: 167

How to bind radio buttons to containers using v-for?

I have been trying to build a quiz with Vue js but am running into the problem right now where the radio buttons are not getting bound to the questions like I want: https://jsfiddle.net/deeformvp/sqx3m2bz/2/

<div v-for="(question, index) in questions" :key="index">
    {{question.question}}
    <div v-for="(answer, index) in question.answers" v-model="pricingUnit" :key="index">
       <label>
        <input type="radio" name="question.question">{{answer}}
       </label>
    </div>
</div>

All the answers seem to be working together instead of separated by question div. What am I missing?

I have taken a look at Vue.js how to use radio buttons inside v-for loop and ensured that I bound the name variable but it still does not work.

Upvotes: 0

Views: 79

Answers (1)

Decade Moon
Decade Moon

Reputation: 34306

You have a typo: name should be :name:

<input type="radio" :name="question.question">

Upvotes: 1

Related Questions