buefy 上的复选框值错误行为答案

【问题标题】：Checkbox value wrong behavior on buefybuefy 上的复选框值错误行为
【发布时间】：2019-03-07 16:22:14
【问题描述】：

我从一个数组生成一个复选框列表，当我选择一些框时，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>

【问题讨论】：

form 是一个对象（form: {}, in data）所以v-model 的行为就像一个对象，而不是一个数组。你能指望什么？ Vue 是否应该自动将其更改为数组？同样this.form[this.query.id+'-'+this.query.priority] = []; 只会更改form 对象内的对象，而不是form 本身。
form 中有更多属性，我只是没有发布示例的整个对象。我希望form 表现得像一个对象，但我不明白为什么我在其中生成的数组没有选中所有复选框，而是在每次选择后只选中最后一个
这是因为v-model 对数组和对象的行为会有所不同。这是一个并排比较：jsfiddle.net/6p158thy
我 fork 你的例子来匹配我试图解释的jsfiddle.net/3x7wLv4t
使用v-model 作为包含数组的对象而不是使用数组作为v-model 开始的意义何在？如果需要，您始终可以使用多个 v-models 并将它们组合到一个带有计算属性的对象中。

标签： javascript vue.js bulma buefy

【解决方案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>

【讨论】：