javascript - buefy 上的复选框值错误行为

Question

我从一个数组生成一个复选框列表，当我选择一些框时，v-model 值（创建 Vue 实例时声明的生成数组）不会将新框值添加到数组中，而是替换为空数组并将值放入其中。

举个例子：我得到了 3 个值“Cat”、“Dog”和“Bird”。当我检查“Cat”时，数组看起来像[“Cat”]，当我用“Cat”检查“Dog”时，数组看起来像[“Dog”]。

当我使用在数据中定义的变量（数组）时它可以工作，但是当我在表单变量中使用我的数组时它不起作用。

<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

为了解决我的对象的行为，我将它转换为一个数组，使用查询的 id 作为表单的 id。我在别处获取查询的优先级。

它解决了我的问题，但没有解决使用字符串作为此类代码的索引的问题。

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