When I create a list of checkboxes from an array, the behavior I'm experiencing is that when I select one item, it replaces the existing selection instead of adding to it. For example, if I have "Cat", "Dog" and "Bird" as options and I check "Cat", the resulting array is ["Cat"]. If I then check "Dog" along with "Cat", the array becomes ["Dog"] only.
Interestingly, this issue occurs when using a generated array for v-model value, but works fine when using a variable defined in the data. Here's some sample code showcasing the problem:
<div id="root">
<b-checkbox
v-for="(field, key) in query.fields"
v-model="form[query.id+'-'+query.priority]"
:native-value="field.id">
{{ field.name }}
</b-checkbox>
</div>
<script>
const vue = new Vue({
el: '#root',
data: {
query: {id: 1, priority: 1, fields: [{id: 1, name: 'cat'}, {id: 2, name: 'dog'}, {id: 3, name: 'bird'}]),
form: {},
},
created: function () {
this.form[this.query.id+'-'+this.query.priority] = [];
}
});
</script>