Vue.js，有条件地将项目添加到数组

Question

我有一个硬编码的菜单项，在其中循环浏览以在表中显示其内容，然后为每个项添加一个按钮。 我想做的是允许用户将所选商品添加到我的购物车中，该商品在我的数据函数中初始化为空数组，因此首先我要验证所选商品在用户购物车中不存在，所以如果它不存在，它将被添加，如果它存在，我想将其数量增加一。 请在根app.vue组件的codesandbox中找到实现此功能的代码， 如果需要，请在下面的评论中要求进一步的澄清。谢谢

Answer 1

问题在addItem函数的forEach中。请找到更新的代码。

addItem(pizza, options) {
      let selectedPizza = {
        name: pizza.name,
        siza: options.size,
        price: options.price,
        quantity: 1,
        id: options.size === 'L' ? pizza.id.split('').reverse().join('') : pizza.id
      }

      if(this.cart.length > 0) {
        let exist = false;
        for(let index = 0; index < this.cart.length; index++) {
          let item = this.cart[index];
          if(item.id === selectedPizza.id && item.size === selectedPizza.size){
            item.quantity++;
            this.response ='Item already exist in the cart';
            exist = true;
            break;
          } 
        }
        if(!exist) {
            this.response = ''
            this.cart.push(selectedPizza)
        }
      } else {
        this.cart.push(selectedPizza)
        console.log('item is added to an empty cart')
      }
    }

如果当前迭代中的披萨不等于selectedPizza，则您要在forEach中多次将披萨添加到购物车中。