Qfyilyi

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?

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.

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

EDIT : think you misordered the index and the term.