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

Question

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

Honestly, when my eyes hurt after long hours of screen time, I thank the universe for having my friends at stackoverflow. What a blessing! Sorry for that @AdamOrlov — Jack Casas, May 28 '20 at 21:43

score 2 · Answer 1 · answered May 28 '20 at 21:37

2

You don't need : before v-model.

answered May 28 '20 at 21:37

DedaDev

4,441
2
21
28

score 1 · Accepted Answer · answered May 28 '20 at 21:41

1

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

answered May 28 '20 at 21:41

Adam Orłowski

4,268
24
33

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

2 Answers2