具有 v-model 和项目数组的 Vue 3 自定义复选框组件

Question

迫切需要你们的帮助。

所以基本上我有一个 带有 v-model 的自定义复选框组件。我在组件上使用 v-for 循环来显示带有数组名称的复选框。在父组件中，我有两列可用和选定。这个想法是，如果我选中 Available 列 中的一个框，它应该会出现在 Selected column 上。问题是它按字母显示而不是全名。

我能够在没有复选框组件的情况下实现所需的结果，但由于在我的项目中我将需要很多复选框，因此我希望有一个组件。

请点击以下链接获取代码： CodeSandBox

不要介意样式的差异。

问题：

期望的结果：

Answer 1

有两个问题。第一个问题是，您将v-model 设置为v-model="filter.filterCollection"，因此您选择的复选框将作为字符串存储到数组中，如果您选择另一个复选框，则字符串将被覆盖。第二个问题是，您将该存储的字符串称为数组。这导致您的字符串（一个字母数组）将为每个字母呈现。所以“数字”就像["N", "u", "m", "b", "e", "r"]。

要解决您的问题，您需要将每个选择及其自己的引用存储在您的v-model 中。为了满足您正确列出和正确删除的需求，您需要应用以下更改：

你的复选框循环

<Checkbox
   v-for="(item, index) in items"
   :key="item.id"
   :label="item.name"
   :id="index"
   :isChecked="isChecked(index)" // this is new
   @remove-selected-filter="removeSelectedFilter" // This is new
   :modelValue="item.name"
   v-model="filter.filterCollection[index]" // Change this
/>

你的 v-model

filter: {
        filterCollection: {} // Object instead of array
      }

FilterPopUp.vue 中的方法

methods: {
    removeSelectedFilter(index) {
      delete this.filter.filterCollection[index];
    },
    isChecked(index) {
      return !!this.filter.filterCollection[index];
    }
  }

你的 Checkbox.vue：

<template>
  <label>
    <p>{{ label }}</p>
    <input
      type="checkbox"
      :id="id"
      :value="modelValue"
      :checked="isChecked"
      @change="emitUncheck($event.target.checked)"
      @input="$emit('update:modelValue', $event.target.value)"
    />
    <span class="checkmark"></span>
  </label>
</template>

<script>
export default {
  name: "Checkbox",
  props: {
    modelValue: { type: String, default: "" },
    isChecked: Boolean,
    label: { type: String },
    value: { type: Array },
    id: { type: Number },
  },
  methods: {
    emitUncheck(event) {
      if(!event){
        this.$emit('remove-selected-filter', this.id);
      }
    }
  }
};
</script>

现在应该可以正确显示您的项目，正确删除项目并在删除项目后取消选中复选框。

Answer 2

StevenSiebert 已正确指出您的错误。

但他的解决方案并不完整，因为当您取消选中其中一个过滤器时，不会从集合中删除过滤器。

这是我对您的复选框按预期工作的完整解决方案：

Checkbox.vue

<template>
  <label>
    <p>{{ label }}</p>
    <input
      type="checkbox"
      :id="id"
      v-model="checked"
      @change="$emit('change', { id: this.id, checked: this.checked})"
    />
    <span class="checkmark"></span>
  </label>
</template>

<script>
export default {
  name: "Checkbox",
  props: {
    modelValue: { type: Boolean, default: false },
    label: { type: String },
    id: { type: Number },
  },
  emits: ["change"],
  data() {
    return {
      checked: this.modelValue
    };
  }
};
</script>

FilterPopUp.vue

<template>
   ...
       <Checkbox
          v-for="(item, index) in items"
          :key="index"
          :label="item.name"
          :id="index"
          @change="onChange"
        />
  ...            

</template>

<script>
...
methods: {
    removeSelectedFilter(index) {
      this.filter.filterCollection.splice(index, 1);
    },
    onChange(args) {
      const {id, checked} = args;
      const item = this.items[id].name;
      if (checked) {
        if (this.filter.filterCollection.indexOf(item) < 0) {
         this.filter.filterCollection.push(item);
        }
      } else {
        this.filter.filterCollection = this.filter.filterCollection.filter( i=> i != item);
      }
    },
  },
...

这是工作的 CodeSandbox：

https://codesandbox.io/s/pensive-shadow-ygvzb?file=/src/components/Checkbox.vue

当然，有很多方法可以做到这一点。如果有人有更好更短的方法，请发布您的解决方案。看看会很有趣。