因此，我正在建立一个购物车在它的商店，我想添加产品到购物车，并查看他们在购物车后，我添加了他们。我怎么能修复我的代码？因为我偶然发现了JavaScript的推方法，但由于某种原因，它不适合我。那么，我怎么能添加项目到购物车，并检索他们以后？
下面是我代码：
shop.vue
<template>
<div class="shop">
<h1>shop</h1>
<div class="products" v-for="item in items" :key="item.id">{{ item.name }}</div>
<button @click="addToCart">Add to Cart</button>
</div>
<div class="cart">
<h1>cart</h1>
<div class="cartitems" v-for="item in cart" :key="item.id">{{ item.name }} {{ item.price }}</div>
</div>
</template>
<script>
import Products from "../db.json"
export default {
name: "shop",
data() {
return {
items: Products,
cart: []
}
},
methods: {
addToCart() {
this.cart.push(this.items.id)
}
}
}
</script>db.json作为产品的"数据库
[
{
"id": 1,
"name": "iphone",
"price": 2000
},
{
"id": 2,
"name": "galaxy",
"price": 3000
}
]
1条答案
按热度按时间ffx8fchx1#
1.有一个错别字（我假设）。你想添加某个项目id到购物车。
this.items是一个数组，没有id属性。1.实际上，您需要将id作为参数传递给
addToCart方法：<button @click="addToCart(item.id)">Add to Cart</button>然后抓取并添加到购物车：
更新/编辑：
您还需要将
<button>放入v-for循环中，否则它将无法访问迭代作用域：