Use v-model with a checkbox when v-for is used with properties of an object
12,350
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>
Related videos on Youtube
Author by
Jinjinov
I have experience working with C++ and DirectX. I prefer working with C# and .NET Core. In my spare time I work with HTML, CSS and Blazor.
Updated on June 04, 2022Comments
-
Jinjinov almost 2 years
Using
v-model
with a checkbox works whenv-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 whenv-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 withoutv-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.
-
Jinjinov over 5 yearsthank you so much, i spent the entire evening working on this... i don't know why i missed this syntax in the documentation...