VueJS 根据手表中的键从对象数组中获取唯一值

Question

我有一块手表可以检查选中的标签：

watch: {
  search (val) {
    for (let i = 0; i < val.length; i++) {
      this.form_data.products_credit.push({
        product_id: val[i].id,
        quantity: null,
        package_size: null,
        purchase_price: null,
        warehouse_id: null
      });
    }
  }
}

这很好，但是当用户选择例如 tag1 时会出现问题 this.form_data.products_credit 值等于：

[
  {
    product_id: 1,
    quantity: null,
    package_size: null,
    purchase_price: null,
    warehouse_id: null
  }
]

之后如果用户选择了tag2，那么this.form_data.products_credit的结果将是：

[
      {
        product_id: 1,
        quantity: null,
        package_size: null,
        purchase_price: null,
        warehouse_id: null
      },
      {
        product_id: 2,
        quantity: null,
        package_size: null,
        purchase_price: null,
        warehouse_id: null
      },
      {
        product_id: 2,
        quantity: null,
        package_size: null,
        purchase_price: null,
        warehouse_id: null
      }
    ]

我的期望：

我没想到在选择另一个标签后会发生重复，但这是正常的，因为我正在循环抛出它们。

我做了什么：

我曾尝试在循环之前清空我的products_credit，如下所示：

this.form_data.products_credit = []

在循环之前。

效果很好，但我不希望这样，因为它会对我的下一步产生副作用。

问题的一个工作示例：here

Answer 1

您可以在添加之前检查您的数组是否已包含您的产品：

watch: {
  search (val) {
    for (let i = 0; i < val.length; i++) {
      if (
        !this.form_data.products_credit.some(item => {
          item.product_id === val[i].id
        })
      ) {
        this.form_data.products_credit.push({
          product_id: val[i].id,
          quantity: null,
          package_size: null,
          purchase_price: null,
          warehouse_id: null
        });
      }
    }
  }
}

但我觉得对于基于用户输入生成的标签数组的计算属性的问题，有更简单、更快捷的解决方案。如果您能够分享更多您正在做的事情，也许我们可以找到更好的解决方案。

编辑： 在看到您的 JSFiddle 之后，这里有一个建议，可以仅使用计算属性 (JSFiddle) 来处理您的问题：

data: {
  search: [],
  products: [
    {
      id: 1,
      title: "first product",
      category: "first category",
      image: "first_image.jpg",
      barcode: "123123123"
    },
    {
      id: 2,
      title: "second product",
      category: "second category",
      image: "second_image.jpg",
      barcode: "23232323"
    },
  ],
  form_data: {
    category: null,
    products_credit: [],
  }
},
methods: {
    searchProducts (query) {
        //
    }
},
computed : {
  selectedProduct () {
    return this.search.map(item => {
      return {
        product_id: item.id,
        quantity: null,
        package_size: null,
        purchase_price: null,
        warehouse_id: null
      }
    })
  }
}

这是执行此操作的首选方法，因为代码更短，并且没有资源昂贵的观察者。它还同时处理从用户搜索中删除项目。