Jack Casas
Jack Casas

Reputation: 994

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

Upvotes: 0

Views: 1414

Answers (2)

Adam Orłowski
Adam Orłowski

Reputation: 4464

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

Upvotes: 1

DedaDev
DedaDev

Reputation: 5249

You don't need : before v-model.

Upvotes: 2

Related Questions