时间戳

首页 > 解决方案 > Vue v-model 不选择复选框上的值

vue.js - Vue v-model 不选择复选框上的值

问题描述

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

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

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 中被正确过滤。但是当我在复选框中选中一个值时，该复选框没有被勾选。复选框怎么可能没有被勾选，同时它清楚地正确过滤了值？

我什至查看了也正确返回or的:checked值，但该复选框仍未在 UI 中勾选。$event.target.checkedtruefalse

我对单选按钮有同样的问题。

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

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

谢谢！

标签： vue.js

解决方案

我进行了测试，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 ;)

推荐阅读