[英]How to add shopping cart with vue.js?
我試圖添加購物車,但我不知道該怎么做。 當count = 0
, -
是hidden.And當count > 0
, -
是show.When我嘗試點擊+
,自動增加1,點擊-
通過1自動降低但不能顯示。 的jsfiddle
看一下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>
您每次都在更改相同的狀態,而不是列表中的狀態。
您應該簡單地做:
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--; } } })
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script> <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>
請注意,您的方法不需要事件參數。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.