vue 怎么向购物车中添加商品
时间: 2023-05-26 14:07:42 浏览: 76
在Vue中向购物车中添加商品的步骤:
1. 在Vue组件中的data里定义一个数组,用来存储购物车中的商品列表,例如:`cartList: []`。
2. 创建一个添加商品的方法,例如:`addToCart(item)`,其中`item`是要添加到购物车中的商品对象。在该方法中,先检查商品是否已经存在于购物车中,如果是,则将该商品的数量加1;否则,将该商品添加到购物车中,并设置其数量为1。
3. 在HTML模板中,使用`v-for`指令渲染出商品列表。对于每个商品,可以通过点击“添加到购物车”按钮,触发`addToCart`方法将其添加到购物车中。
以下是示例代码:
```
<template>
<div>
<h2>商品列表</h2>
<ul>
<li v-for="item in itemList" :key="item.id">
{{ item.name }} - {{ item.price }}元
<button @click="addToCart(item)">添加到购物车</button>
</li>
</ul>
<h2>购物车</h2>
<ul>
<li v-for="cartItem in cartList" :key="cartItem.id">
{{ cartItem.name }} - {{ cartItem.price }}元 x{{ cartItem.quantity }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
itemList: [
{ id: 1, name: '商品1', price: 100 },
{ id: 2, name: '商品2', price: 200 },
{ id: 3, name: '商品3', price: 300 },
],
cartList: [],
};
},
methods: {
addToCart(item) {
const cartItem = this.cartList.find((c) => c.id === item.id);
if (!cartItem) {
this.cartList.push({
id: item.id,
name: item.name,
price: item.price,
quantity: 1,
});
} else {
cartItem.quantity++;
}
},
},
};
</script>
```