Question

我有一个餐厅菜单，该菜单是一个对象数组，每个对象都具有以下属性：-

名称
id-ID是自动生成的
数量
options-它本身是一个具有两个值对的数组-大小和价格

现在，我要允许用户在验证所选商品在购物车中不存在后，将商品添加到购物车中，我面临的问题是，每个商品都有一个ID，但同时时间有两个或更多个不同的大小

这是我的代码

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

除了我尝试添加大小不同的相同披萨外，上面的代码工作正常，因为在这种情况下，id会重复出现，因为每个项目都有一个ID，并不是每个披萨大小都有一个，任何人都可以想到解决方法？预先感谢。.

Answer 1

这似乎更多是数据结构问题，而不是语法或编码问题。在您的情况下，我将添加一个重复的披萨，每种大小一个。这样，您仍然可以增加金额。 IE：

菠萝比萨饼（小）1x
菠萝比萨（大）1x

如果需要，您必须重组数据
菠萝比萨2x（大小）

您的问题并没有真正显示您想要的解决方案。

Vue应用程序，JavaScript，有条件地将对象添加到数组

1 个答案: