Vue js 2列表渲染问题

Question

我在vue js 2中做一个简单的购物车应用时遇到了一个问题 这是我的代码：

空白购物车项目数组，当我按下添加到购物车按钮，然后该特定产品将被推入此数组。

data () {
    return {
      cartItems: []
    }
}

添加到购物车方法：

methods: {
    addToCart (product) {
      product.quantity += 1
      this.cartItems.push(product)
    }
}

模板视图：

<ul>
   <li v-for="item in items">
        <pre>
            {{item.name}} -- {{item.quantity}}
        </pre>
    </li>
</ul>

在浏览器中，我得到了这个：

注意：右侧1和2值是该产品的数量 但是我想要这样的东西。

注意：右侧1和2值是该产品的数量

如果我使用vue js 1而不是vue js 2，那么相同的代码会给我浏览器视图，就像我附加的第二个截图一样。

请任何人帮我解决这个问题。

Answer 1

问题是您将产品推送到阵列两次。 检查产品是否存在于cartItems数组中，否则 - 添加，否则 - 更新产品数量

Answer 2

你是如何创造新产品的？在调用addToCart时是否引用了同一个对象，或者您是否进行了某种深层复制或扩展？如果您多次添加相同的参考，它们将具有相同的数量。

v-for="item in items"如果您不使用伪代码作为示例，则此值应为ìf cartItems。

Answer 3

那是因为您增加产品数量，然后再增加一次将相同产品推入list。您应该检查该项目是否在列表中