vue购物车添加商品

好的，以下是一个简单的Vue购物车添加商品的示例代码：

1. 在你的Vue组件中，定义一个data属性，用于存储购物车中的商品列表：

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

2. 在模板中，使用v-for指令遍历购物车中的商品，显示每个商品的名称、价格和数量：

<div v-for="(item, index) in cartItems" :key="index">
  <p>{{ item.name }}</p>
  <p>价格：{{ item.price }}</p>
  <p>数量：{{ item.quantity }}</p>
</div>

3. 在模板中，使用v-on指令监听添加商品按钮的点击事件，调用addItem方法来添加商品到购物车：

<button @click="addItem(item)">添加到购物车</button>

4. 在Vue组件的methods中，定义addItem方法，用于将商品添加到购物车中：

methods: {
  addItem(item) {
    // 判断购物车中是否已经存在该商品
    const index = this.cartItems.findIndex(cartItem => cartItem.id === item.id)
    if (index !== -1) {
      // 如果存在，将商品数量加1
      this.cartItems[index].quantity++
    } else {
      // 如果不存在，将商品添加到购物车中
      this.cartItems.push({
        id: item.id,
        name: item.name,
        price: item.price,
        quantity: 1
      })
    }
  }
}

这样，当用户点击“添加到购物车”按钮时，Vue会调用addItem方法，将商品添加到购物车中。如果购物车中已经存在该商品，则将商品数量加1，否则将商品添加到购物车列表中。