在数组中添加和删除元素答案

【问题标题】：Adding and removing an element in an array在数组中添加和删除元素
【发布时间】：2022-01-23 15:15:27
【问题描述】：

有 2 个切换按钮。如果值为true，则添加到array，否则删除该元素。

数据：

originality: []

切换：

<toggle id='1' ref='toggleOriginal'> Click </toggle>
<toggle id='2' ref='toggleAnalog'> Click </toggle>

方法：

 if(this.$refs.toggleOriginal.isActive) {
    this.originality.push(this.$refs.toggleOriginal.id);
 } else {
    this.originality = this.originality.filter((item) => {
      return item == this.$refs.toggleOriginal.id;
   });
 }

 if(this.$refs.toggleAnalog.isActive) {
    this.originality.push(this.$refs.toggleAnalog.id);
  } else {
    this.originality = this.originality.filter((item) => {
      return item == this.$refs.toggleAnalog.id;
    });
  }

第二个也是一样。在isActive 中，我检查true / false。问题是如果两个切换是true 而我想将一个转换为false，则删除错误的元素。也许您应该使用不同的功能？

【问题讨论】：

您可以使用v-model 将切换的状态链接到一个变量（例如它的 ID）。然后，您可以使用computed value 创建originality 数组。无需手动调整它们的值。
@PeterKrebs 感谢您的重播。我认为我不能将v-model 用于组件。不是吗？
当然你可以使用v-model作为组件。这就是它存在的原因，因此您不必在每个组件之间手动调整值。

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

要使用过滤器从数组中删除，您应该测试不等式。您的示例使用相等，这将删除除您的项目之外的所有内容。

this.originality = this.originality.filter((item) => {
      return item !== this.$refs.toggleOriginal.id;
   });

或拼接

const index = this.originality.indexOf(this.$refs.toggleOriginal.id)
this.originality.splice(index, 1)

【讨论】：