buefy 上的复选框值错误行为
Checkbox value wrong behavior on buefy
我从一个数组生成一个复选框列表,当我 select 一些复选框时,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>
为了解决我的对象的行为,我将它转换为一个数组,使用查询的 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>
我从一个数组生成一个复选框列表,当我 select 一些复选框时,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>
为了解决我的对象的行为,我将它转换为一个数组,使用查询的 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>