Use v-model with a checkbox when v-for is used with properties of an object

Question

Using v-model with a checkbox works when v-for is used with an array of objects:

new Vue({
  el: '#example',
  data: {
    names: [
      { name: 'jack', checked: true },
      { name: 'john', checked: false },
      { name: 'mike', checked: false }
    ]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id='example'>
  <div v-for="(item, index) in names" :key="index">
  <input type="checkbox" :id="item.name" v-model="item.checked">
  <label :for="item.name">{{ item.name }} {{ item.checked }}</label>
  </div>
</div>

Using v-model with a checkbox doesn't work when v-for is used with properties of an object:

new Vue({
  el: '#example',
  data: {
    names: {
      jack: true,
      john: false,
      mike: false
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id='example'>
  Does not work with v-for:
  <div v-for="(value, key, index) in names" :key="index">
  <input type="checkbox" :id="key" v-model="value">
  <label :for="key">{{ key }} {{ value }}</label>
  </div>
  But it does work without v-for:
  <br>
  <input type="checkbox" id="jack" v-model="names.jack">
  <label for="jack">jack</label>
  <br>
  <input type="checkbox" id="john" v-model="names.john">
  <label for="john">john</label>
  <br>
  <input type="checkbox" id="mike" v-model="names.mike">
  <label for="mike">mike</label>
  <br>
  And it even changes the checkbox above!
</div>

But using v-model with a checkbox works with properties of an object without v-for!

Why is that? How can I fix it? I really need v-for to work with properties of an object!

EDIT: I don't need an array of checked values, I need to change the exact values of the properties of the object.

Richard Matsen · Accepted Answer · 2018-10-07 19:03:34Z

18

The syntax v-model="names[key]" will work, see Dynamic v-model directive

new Vue({
  el: '#example',
  data: {
    names: {
      jack: true,
      john: false,
      mike: false
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id='example'>
  Does not work with v-for:
  <div v-for="(value, key, index) in names" :key="index">
    <input type="checkbox" :id="key" v-model="names[key]">
    <label :for="key">{{ key }} {{ value }}</label>
  </div>
  But it does work without v-for:
  <br>
  <input type="checkbox" id="jack" v-model="names.jack">
  <label for="jack">jack</label>
  <br>
  <input type="checkbox" id="john" v-model="names.john">
  <label for="john">john</label>
  <br>
  <input type="checkbox" id="mike" v-model="names.mike">
  <label for="mike">mike</label>
  <br>
  And it even changes the checkbox above!
</div>

answered Oct 7, 2018 at 19:03

Richard Matsen

20.9k3 gold badges59 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jinjinov Over a year ago

thank you so much, i spent the entire evening working on this... i don't know why i missed this syntax in the documentation...

cyqsimon Over a year ago

God I hate Javascript.

Collectives™ on Stack Overflow

Use v-model with a checkbox when v-for is used with properties of an object

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related