Приложение Vue, Javascript, условно добавляет объект в массив

Question

У меня есть меню ресторана, представляющее собой массив объектов, каждый из которых имеет следующие свойства: -

• name
• id - идентификатор генерируется автоматически
• количество
• опций - сам по себе массив с двумя парами значений -size & price

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

Вот мой код

export default {
data(){
  return {
    cart: []
  }
}

//...
methods: {
    addItem(pizza, options){
      let selectedPizza= {
        id: pizza.id,
        name: pizza.name,
        size: options.size,
        price: options.price
        quantity: 1
      }
      
      if(this.cart.length > 0) {
        this.cart.forEach(item => {
          if(item.name === selectedPizza.name && item.size === selectedPizza.size && item.id === selectedPizza.id) {
            return item.quantity++
          } else {
            this.cart.push(selectedPizza)
          }
        })
      } else {
        this.cart.push(selectedPizza)
      }
    } 
  }
}

приведенный выше код работает нормально, за исключением случаев, когда я пытаюсь добавить одну и ту же пиццу с другим размером, поскольку в этом случае идентификатор повторяется, так как каждый элемент имеетТо есть, не каждый размер пиццы есть, кто-нибудь может придумать обходной путь?заранее спасибо ..

Answer 1

Это скорее проблема структуры данных, нежели синтаксис или проблема кодирования.В вашем случае я бы добавил дубликат пиццы, по одному для каждого размера.Таким образом, вы все еще можете увеличить сумму.IE:

• Ананасовая пицца (маленькая) 1x

• Ананасовая пицца (большая) 1x

  Вам придется реструктурировать свои данные, если выхочу

• Ананасовая пицца 2x (маленькая и большая)

Ваш вопрос не показывает, какое решение вы хотите.