我做了一个购物车,产品被添加到购物车中。当我单击产品时,它将存储在购物车中,而不是本地存储中。我将其设置为本地存储。当我单击购物车中已经存在的产品时,我想增加其数量,但这没有发生。相反,它添加了另一行,我想防止这种情况。
这是我的组成部分:
<template>
<div class="row">
<div class="col-md-8">
<div v-for="(product, id) in products" :key="id" class="col-xl-3 col-sm-6 mb-3 float-left">
<div class="card o-hidden h-100">
<div class="card-body">
<div class="card-body-icon">
<i class="fas fa-fw fa-comments"></i>
</div>
<div class="mr-5">{{product.name}}</div>
</div>
<div class="card-footer clearfix small z-1 form-group row" href="#">
<span class="float-left"><input type="text" v-model="product.qty" class="form-control form-control-sm mb-2"></span>
<strong class="float-right col-sm-6">
{{product.price}} TK
</strong>
<button class="btn btn-sm btn-info float-right col-sm-6" @click="addToCart(product)">
<i class="fas fa-plus"></i>
</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<table class="table table-sm">
<thead>
<tr>
<th>#SL</th>
<th>Name</th>
<th>Qty</th>
<th>Price</th>
<th>L/T</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr v-for="(cart, i) in carts" :key="i">
<td>{{cart.id}}</td>
<td>{{cart.name}} </td>
<td class="text-right">{{cart.qty}}</td>
<td class="text-right">{{cart.price}}</td>
<td class="text-right">{{cart.price*cart.qty}}</td>
<td><button type="button" @click="removeProduct(i)" class="btn btn-sm btn-danger">x</button></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4" class="text-right font-weight-bold">Total</td>
<td class="text-right"> {{total}}/-</td>
</tr>
</tfoot>
</table>
<div>
<button class="btn btn-sm btn-info float-right">Checkout</button>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
products:[],
carts:[],
}
},
computed:{
total(){
var total = 0
this.carts.forEach(cart => {
total += parseFloat(cart.price * cart.qty)
})
return total
},
},
mounted(){
this.showProduct()
},
methods:{
showProduct(){
axios.get('api/pos')
.then(res=>{
this.products = res.data.data
});
},
addToCart(product){
this.carts.push(product)
},
removeProduct(i){
this.carts.splice(i,1)
}
}
}
</script>
这是屏幕截图:
答案 0 :(得分:0)
问题是addToCart()
只是将另一种产品推入购物车而没有检查它是否已经存在。
要解决此问题,请更新该方法以查找物料,如果找到,则增加物料的数量。否则,将另一个物品推入购物车:
addToCart(product) {
if (this.carts.find(p => p.id === product.id)) {
product.qty++
} else {
this.carts.push(product)
}
}