CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Geoff
Geoff

Reputation: 6649

Vuejs with v-for and v-model with checkboxes fails to clear after uncheck then recheck

I have the following form

<tr v-for="(check, key) in checklistitems ">
  <td>
    <input type="radio" v-model="items_form.yes[key]" :value="check.id" :name="radioname(check)" />
  </td>
  <td>
    <input type="radio" v-model="items_form.no[key]" :value="check.id" :name="radioname(check)" />
  </td>
  <td>
    <input v-model="items_form.comment[key]" type="text" />
  </td>
  <td>
    <input v-model="items_form.date_expiry[key]" type="text" />
  </td>
</tr>

And, I have a computed property which gives the name

data: () => ({

  items_form: {
    no: [],
    yes: [],
    comment: []
      .....
  }
})

The comment works perfectly but the radio buttons fail.

Such that when I check the yes radio for the first time it sets the value correctly, when I check no it still checks the value but doesn't clear the previous yes value.

What else do I need to add?

Upvotes: 2

Views: 720

Answers (1)

samayo
samayo

Reputation: 16495

You are giving both your radio input different models, that is why it is not working.

In order to be able to 'toggle' or switch one or the other, they should have the same model and only the value should be different as seen in this demo

So, use this instead.: 

<td>
  <input type="radio" v-model="items_form.no[key]" value="yes"/>
</td>
<td>
  <input type="radio" v-model="items_form.no[key]" value="no"/>
</td>

Upvotes: 2

Related Questions