Javascript VUEJ根据“键入监视”从对象数组中获取唯一值

我有一块手表来检查所选的标签：

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
      });
    }
  }
}

在此之后，如果用户选择了tag2，则

此.form\u data.products\u 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
      }
    ]

我期待的是：

我没有预料到在选择另一个标记后发生的重复，但这是正常的，因为我正在循环抛出它们

我所做的：

在循环之前，我尝试清空我的

产品\u信用

，如下所示：

this.form\u data.products\u credit=[]

在循环之前

它工作得很好，但我不想这样，因为它会对我的下一步产生副作用

---

此问题的一个工作示例：

在添加产品之前，您可以检查阵列是否尚未包含产品：

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
        });
      }
    }
  }
}

---

这是实现这一点的首选方法，因为代码较短，并且没有资源昂贵的观察者。它还可以同时从用户的搜索中删除项目。

事实上，我理解您的结果，但它也会返回重复的输入！我不知道怎么做！这是非常令人惊讶的。您认为您可以通过或任何测试共享网站共享您当前的代码吗？很抱歉，我迟到了，但我尝试最小化我的代码，就像在JSFIDLE示例中一样。请检查我编辑的答案这是你的JSFIDLE工作：，基本上是为了你的标志，你测试的是

this.form\u data.products\u credit[x].id

，而不是

this.form\u data.products\u credit[x].product\u id

，但如果你有耐心，我可能会想出一个更好的解决方案：）首先（没有太大变化）：工作，没有控制台日志和一点ES6合成糖：

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
        });
      }
    }
  }
}

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
      }
    })
  }
}