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

Question

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

Answer 1

问题出在 forEach 里面的 addItem 函数中。请查找更新后的代码。

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 中多次将披萨添加到购物车中。