首先思考一下
逻辑:
点删除按钮,弹框,取消-留在当前页面,确定-此条数据删除
在确定的函数里面调一个接口
<van-checkbox-group class="card-goods" >
<van-checkbox class="cart-item" v-for="(item,index) in cartList"
:key="index">
<!-- <img src="https://img.yzcdn.cn/public_files/2017/10/24/2f9a36046449dafb8608e99990b3c205.jpeg"
alt=""> -->
<img :src="item.cover_image_url" alt="">
<div class="goods-info">
<p class="goods-title">{{item.name}}</p>
<p class="goods-desc">{{item.short_description}}</p>
<p class="goods-money">
<span>{{item.price}}</span>
<span class="btn-group">
<input type="button" value="-" class="decrease">
<input type="number" v-model="item.productNum" class="number">
<input type="button" value="+" class="increase">
</span>
</p>
</div>
<van-button class="operate-delete"
size="mini"
type="danger" v-on:click="delCartConform(item.id)">删除</van-button>
</van-checkbox>
</van-checkbox-group>
data:{
prodectId: '',
cartList: [],
}
delCartConform (id) {
this.prodectId = id
Dialog.confirm({
title: '你确定要删除此条数据吗?'
}).then(() => {
// on confirm
this.axios.post('/users/cartDel', {
id: id
}).then((response) => {
let res = response.data
console.log(res)
// eslint-disable-next-line eqeqeq
if (res.status == '0') {
this.init() // 重新初始化购物车数据
}
})
}).catch(() => {
// on cancel
})
},
后台:
//购物车删除
router.post('/cartDel',function(req,res,next){
var userId = req.cookies.userId,id = req.body.id;
console.log(id)
console.log(userId)
db.User.updateOne({
userId:userId
},{
$pull:{
'cartList':{
'id':id
}
}
},function(err,doc){
if(err){
res.json({
status:'1',
msg:err.message,
result:''
});
}else{
res.json({
status:'0',
msg:'',
result:'suc'
});
}
})
});
修改数量
思考:不仅点击加减可以使数量变化,而且要链接到数据库
参考: https://www.cnblogs.com/wangyawei/p/9236795.html