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

Это предпочтительный способ сделать это, потому что код короче, и нет наблюдателей, которые являются дорогостоящими.Также он обрабатывает удаление элементов из поиска пользователя одновременно.