我尝试添加购物车,但不知道该怎么做。当 count = 0
时,-
隐藏。当 count > 0
时,-
显示。当我尝试时点击+
,自动增加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>
请注意,您的方法中不需要事件参数。
关于javascript - 如何使用vue.js添加购物车?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48381915/