Search code examples
vue.jsvuetify.jsv-forv-model

Vue Vuetify. v-model for v-checkbox not taking the correct value when inside a v-for loop


So I have this in my template:

 <v-checkbox v-for="(option,index) in options" :key="option.id" :label="option.checked.toString()" :v-model="options[index].checked"></v-checkbox> 

And this in my data():

options: [
        {
          id: '1',
          name: 'Cotton',
          checked : true
        },
        {
          id: '2',
          name: 'Silk',
          checked : false
        }
 ]

However, even when the value is true, the checkbox is not checked; why??

I have this in codepen:

https://codepen.io/averied/pen/JjYQLJQ?editable=true&editors=101%3Dhttps%3A%2F%2Fvuetifyjs.com%2Fen%2Fcomponents%2Fselection-controls%2F


Solution

  • Delete : before v-model

    Plus it would be cleaner to use

    v-model="option.checked"

    instead of v-model="options[index].checked"

    then you do not need index in v-for