Vue v-model不会在复选框中选择值

Question

我是Vue的新手，我已经尽可能多地进行了研究，但找不到解决这个奇怪问题的方法。我正在为一个网店构建一个过滤功能，其中一个部分允许使用复选框根据值进行过滤。

我的vue模板如下：

<template>
<div>
<h3>{{data.filterLabel}}</h3>
<ul>
<li v-for="(item, index) in data.options" :key="index">
<input v-model="values" type="checkbox" :id="item" :value="item" :index="index" />
<label class="products__label products__capitalize" :for="item">{{ item }}</label>
</li>
</ul>
</div>
</template>

我从数据库中获取选项，并使用v-for循环遍历data.options数组。我在中创建了一个新的空数组

data() {
return {
values: []
};
},

如vue.js网站上的表单绑定示例所示：https://v2.vuejs.org/v2/guide/forms.html#Checkbox

我的脚本如下：

<script>
export default {
name: "CheckBoxFilter",
data() {
return {
values: []
};
},
props: {
data: Object,
filterCheckBox: Function
},
watch: {
values: function(value) {
const optionRange = JSON.parse(JSON.stringify(this.values));
this.$emit("filterCheckBox", this.data.filterValue, optionRange);
}
}
};
</script>

出于某种奇怪的原因，$emit函数运行得非常好，并且在UI中正确地过滤了产品数组。但是，当我在复选框中选中一个值时，复选框不会被选中。怎么可能没有勾选复选框，同时又清楚地正确过滤了值？

我甚至用$event.target.checked查看了:checked值，它也正确地返回了true或false，但UI中仍然没有勾选复选框。

我对收音机按钮也有同样的问题。

<input type="text">没有问题，<select>也没有问题。

以前有人经历过这种情况吗？如果有，解决方案是什么？

谢谢！

Answer 1

我进行了测试，UI正确显示了选中/未选中的复选框。你使用哪个版本的Vue？我不确定你想做什么，但我认为通过计算属性公开你的值会更干净：

export default {
name: "CheckBoxFilter",
props: {
data: Object,
},
data() {
return {
internalValues: [],
};
},
computed: {
values: {
get() {
return this.internalValues;
},
set(newVal) {
this.internalValues = newVal;
this.$emit("filterCheckBox", this.data.filterValue, [...newVal]);
},
},
},
};
</script>

对于当前的实现，值的更改是不可观察的，并且永远不会发出filterCheckBox事件。

编辑：我也不明白你为什么设置filterCheckBox道具，它不是React；(