代码之家 › 专栏 › 技术社区 › EkinOf

复选框值Buefy上的错误行为

buefy bulma vue.js javascript

0

EkinOf · 技术社区 · 6 年前

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

举个例子:我得到了3个值“cat”、“dog”和“bird”。当我检查“cat”时,数组看起来像那个[“cat”],当我检查“dog”和“cat”时,数组看起来像那个[“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>

1 回复 | 直到 6 年前

1

0

EkinOf 6 年前

为了解决对象的行为,我使用查询的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>