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://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 ;)