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.
You can use v-model with a custom Vue component by accepting a prop named 'value' and emitting an event named 'input'. For example, the below custom component is a fake select using div elements. Clicking on a div selects it.
v-model is used for binding form elements like inputs, radio buttons, textarea, checkboxes. It is used for binding data, attributes, expressions, class, styles.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With