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 = []

在循環之前。

它工作正常，但我不希望這樣，因為它會在下一步中產生副作用。

問題的可行示例： 此處

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

這是執行此操作的首選方法，因為代碼更短，並且沒有監視程序消耗資源。 它還處理從用戶的搜索中同時刪除項目。