Checkbox value wrong behavior on buefy

Question

I generate a list of checkboxes from an array, and when I select some of the box, the v-model value (a generated array declared when Vue instance is created) doesn't add the new box value to the array but replace empty the array and place the value in it.

With an example : I got 3 values "Cat", "Dog" and "Bird". When I check "Cat", the array looks like that ["Cat"] and when I check "Dog" with "Cat", the array looks like that ["Dog"].

When I use a variable (array) defined in the data it works, but when I use my array in the form variable it doesn't work.

<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>

Answer 1

To solve the behaviour of my object, I transformed it into an array using the id of the query as the id of the form. I fetch the priority of the query elsewhere.

It solves my problem but not the problem of using a string as an index for this kind of code.

<div id="root">
  <b-checkbox
      v-for="(field, key) in query.fields"
      v-model="form[query.id]"
      :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] = [];
    }
});
</script>