CODEWITHSUNDEEP
vue.js
Mary
Mary

Reputation: 1125

In Vue.js, how do I unlink an array of radio buttons?

With reference to the following Plunkr:

https://plnkr.co/edit/zbOBDEaWvn8Tw0F0O9cy?p=preview

The radio buttons are linked, because clicking 'Yes' checks both 'Yes' radio buttons, and checking 'No' checks both 'No' radio buttons.

In my data model, I have an array with two separate rows:

terms: [
  {termBoolean: 'Yes'},
  {termBoolean: 'No'}
]

How do I structure my code so that the rows are not linked, and I can check one 'Yes' and one 'No' at a time?

Upvotes: 0

Views: 107

Answers (2)

B. Fleming
B. Fleming

Reputation: 7220

Edit: My original answer was incorrect. Your problem is due to the version of Vue you're using, i.e. version 1.0.26. In version 1 of Vue, there was no (term, index) syntactic sugar. Instead, index was accessed via the special property $index. My earlier answer was not applicable for this version of Vue.

To fix your current code, please make the following change:

<template v-for="term in terms">
    <label>
        <input type="radio" value="Yes" v-model="terms[$index].termBoolean" />Yes
        <input type="radio" value="No" v-model="terms[$index].termBoolean" />No 
    </label><br>
</template>

Alternatively, upgrade to Vue 2.x. If you choose to go this route, please review the migration guide.

Upvotes: 1

securenova
securenova

Reputation: 502

 <template v-for="(index, term) in terms">

EDIT : think you misordered the index and the term.

Upvotes: 0

Related Questions