Vue如何增加购物车(已解决)
我尝试添加购物车,但是我不知道如何去做。当count = 0时隐藏 -,当count> 0时显示 -。当我尝试点击+的时候,自动增加1,点击 - 自动减少1,但是显示不了加减的功能。也许我的技术真的太不行了,反正好好研究一下吧。
写代码之前:
javascript文件:
const goods = [{
id: "1",
goods_name: "水立方",
goods_price: "30.00",
goods_num: "15",
count:"0"
}, {
id: "2",
goods_name: "农夫山泉",
goods_price: "28.00",
goods_num: "10",
count:"0"
}]
var app = new Vue({
el: "#app",
data: {
list: goods,
},
methods: {
addCart(item,event) {
if (!this.item.count) {
Vue.set(this.item, 'count', 1);
} else {
this.item.count++;
}
},
lessCart(event) {
this.item.count--;
}
}
})
HTML文件:
<div id="app">
<ul>
<li v-for="item in list">
<p>{{item.goods_name}}</p>
<p>{{item.goods_price}}</p>
<a v-show="item.count > 0" @click.stop.prevent="lessCart(item,$event)">-</a>
<input v-show="item.count > 0" v-model="item.count">
<a @click.stop.prevent="addCart(item,$event)">+</a>
</li>
</ul>
</div>
这种代码无法实现加减功能,应该修改之后:
javascript:
const goods = [{
id: "1",
goods_name: "水立方",
goods_price: "30.00",
goods_num: "15",
count: "0"
}, {
id: "2",
goods_name: "农夫山泉",
goods_price: "28.00",
goods_num: "10",
count: "0"
}]
var app = new Vue({
el: "#app",
data: {
list: goods,
},
methods: {
addCart(item) {
item.count++;
},
lessCart(item) {
item.count--;
}
}
})
HTML文件:
<div id="app">
<ul>
<li v-for="item in list">
<p>{{item.goods_name}}</p>
<p>{{item.goods_price}}</p>
<a v-show="item.count > 0" @click.stop.prevent="lessCart(item)">-</a>
<input v-show="item.count > 0" v-model="item.count">
<a @click.stop.prevent="addCart(item)">+</a>
</li>
</ul>
</div>
好了,这样可以实现加减功能
因为国外程序员说:“你每次都在变相同的状态,而不是从列表中的状态。请注意,您不需要方法中的事件参数。”