Question

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

以一个示例为例：我得到3个值“ Cat”，“ Dog”和“ Bird”。当我选中“猫”时，数组看起来像[[Cat]]，当我选中“狗”中的“猫”时，数组看起来像[[Dog]]。

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

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

复选框值在buefy上的错误行为

1 个答案: