Vue项目中常见问题(46)删除全部选中的商品

最新推荐文章于 2024-05-16 21:30:28 发布
最新推荐文章于 2024-05-16 21:30:28 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： vue前台管理项目 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46368050/article/details/124925134
版权
目录gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master业务需求1:1.删除选中的商品结构出, 绑定点击事件2. 书写事件函数,派发一个action3.问题来了,我们如果在同一个action中,deleteAllCheckedCart这个函数执行一次,调用上面删除购物车某一个产品的函数deleteCartListBySkuId多次3.1首先我们需要两个参数,一个dispatch,一个getters...
摘要由CSDN通过智能技术生成

目录

gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master

业务需求1:

 1.删除选中的商品结构出, 绑定点击事件

 2. 书写事件函数,派发一个action

 3.问题来了,我们如果在同一个action中,deleteAllCheckedCart这个函数执行一次,调用上面删除购物车某一个产品的函数deleteCartListBySkuId多次

 3.1首先我们需要两个参数,一个dispatch,一个getters

 3.2为了实现我们点击删除选中的商品按钮,执行我们这个deleteAllCheckedCart一次,然后执行deleteCartListBySkuId 我们利用遍历来实现

 3.3我们需要加一个判断,如果选中状态是1,就执行派发action,如果不是1,就什么都不干 

 3.4接下来我们根据Promise的成功和失败的回调来判断删除是成功还是失败 

利用Promise.all([p1,p2,p3])

 4.组件中等待仓库中数据删除,然后发请求派发action

gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master

大家根据上传历史进行查找你需要的代码

业务需求1:

点击删除选中的商品,直接删除

注意:我们没有一次删除很多产品的接口,但是有通过ID可以删除产品的接口[一次删除一个]

1.删除选中的商品结构出, 绑定点击事件

在pages/ShopCart/index.vue中:

2. 书写事件函数,派发一个action

 在store/shopcart/index.js中:

 

 3.问题来了,我们如果在同一个action中,deleteAllCheckedCart这个函数执行一次,调用上面删除购物车某一个产品的函数deleteCartListBySkuId多次

我们调用deleteAllCheckedCart得用dispatch派发一个action才能调用他,所以我们要用到context来测试一下

点击删除选中的商品按钮,打印结果:

最低0.47元/天 解锁文章
学无止境QAQ
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
VUE页面实现点击按钮删除某一条数据
marsur的博客
09-20 2万+
弹出的对话框和轻提示使用的是Vant-UI框架中的组件 <template> <div class="body"> <div v-for="(item,index) in data"> <van-cell-group class="panel"> <button class="delete" @cl...
vue.js单选全选删除选中代码.zip
05-24
vue.js单选全选删除选中代码基于Vue.js2.5.1制作，单选、全选删除ID，单元格，显示选中内容。
vue 全选，选中删除功能实现
m0_45043105的博客
07-26 2906
<p> <input type="checkbox" @click="change" :checked="isSelectAll" /><span >全选</span > </p> 利用vue computed计算属性，计算选中状态 computed: { // 全选状态 isSelectAll() { if (this.addlist.length =.
Web前端最全vuex实现购物车的增加减少移除，web前端面试题及答案2024
最新发布
2401_84619287的博客
05-16 349
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】给大家分享一些关于HTML的面试题。}, 100)},// 减// console.log(params) //点击添加传过来的参数// 使用setTimeout模拟异步获取购物车的数据// 提交给mutations}, 100)},// 移出// console.log(params) //点击添加传过来的参数// 使用setTimeout模拟异步获取购物车的数据// 提交给mutations。
vue多选、全选和选中删除问题
weixin_44760923的博客
11-28 3256
<div id="vueContainer"> <div> <input type='checkbox' class='input-checkbox' :checked="fruitIds.length === fruits.length" @click='checkedAll()'>全选 <div v-for='(frui...
vue里面点击删除获取具体id，进行删除这个功能
qq_54030660的博客
01-12 2942
vue里面点击删除获取具体id，进行删除这个功能
vue.js全选单选删除选中代码.zip
07-05
在"vue.js全选单选删除选中代码.zip"这个压缩包中，我们看到的是一个实现了全选、单选以及删除选中项功能的示例代码。这个功能通常应用于数据列表的管理，比如歌单列表，用户可以方便地选择一个或多个条目进行操作，...
用vue2.0实现点击选中active其他选项互斥的效果
08-27
首先，我们需要了解为什么无法在 Vue 2.0 中直接使用 jQuery 的方式来实现点击选中 active 其他选项互斥的效果。这是因为 Vue 2.0 不提倡进行 DOM 操作，而是推荐使用 Vue 2.0 的内置机制来实现业务逻辑。 在 Vue ...
Vue实现动态添加或者删除对象和对象数组的操作方法
10-17
在Vue.js框架中，动态添加或删除对象和对象数组是常见的需求，特别是在处理表单数据、列表展示等场景。本文将详细讲解如何在Vue项目中实现这一功能。 首先，我们来看一下添加对象到对象数组的核心代码： ```...
vue 清空input标签 中file的值操作
11-20
本文将详细讲解两种常见的解决方案，以及如何在Vue实例中实现这个功能。 首先，让我们看下在Vue模板中的基本结构： ```html ``` 这里，我们创建了一个`<input type="file">`标签，并添加了`ref="pathClear"`属性...
Vue批量删除选中的选项解决方法
weixin_45618937的博客
07-27 1560
Vue批量删除选中的选项解决方法
Vue.js实现购物车checkbox的全选与反选
04-13
购物车的基本操作，推荐全选与反选代码片段，简单易懂，没上传node_modules依赖，下载后自行install
使用vue.js实现checkbox的全选，和部分删除，部分提交
weixin_36944932的博客
01-31 4719
直接上代码： template> div class="select"> ul> li v-for="(item,index) in lesson" style="margin-top: 15px;"> label class="checkbox-label"> input v-model="selectArr" :value="i
Vue中使用Element 表单点击按钮实现增行删行操作
qq_58671311的博客
10-25 1522
首先使用model绑定表单数据，使用v-for遍历snForm下的数组；删行： 使用splice方法删除对应index的行。在Vue中使用form表单点击增行删行操作。增行： 点击按钮新增一条sn进去。
vue实现购物车+-计算价格删除当前选中商品,全选全不选
yangwang666的博客
08-25 947
参考链接 基础学习vue 实例: 一丶引入vue.js 对于制作原型或学习，你可以这样使用最新版本： <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> 对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏： <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"&gt.
vue 表格实现选中删除
qq_43741943的博客
03-02 393
vue 表格实现选中删除
Vue3电商项目实战-购物车模块7【20-登录后-批量删除、21-登录后-选中状态&修改数量、22-登录后-全选反选、23-登录后-修改规格、24-下单结算】
m0_52896752的博客
03-08 399
Vue3电商项目实战-购物车模块7【20-登录后-批量删除、21-登录后-选中状态&修改数量、22-登录后-全选反选、23-登录后-修改规格、24-下单结算】
Vue中通过按钮实现添加或删除表单中的某一块区域
qq_41824830的博客
04-17 1796
1.需要实现的功能: 2.贴代码 <div> <span class="from-title">项目配置</span> <span class="el-icon-arrow-down" v-if="arrow" @click="changeArrow()"></span> <span class="el-icon-arrow-righ...
Vue3电商项目实战-购物车模块5【12-购物车页面-批量删除-本地、13-购物车页面-无效商品-本地、14-购物车页面-修改数量-本地、15-购物车页面-修改规格-本地】
m0_52896752的博客
03-06 550
Vue3电商项目实战-购物车模块5【12-购物车页面-批量删除-本地、13-购物车页面-无效商品-本地、14-购物车页面-修改数量-本地、15-购物车页面-修改规格-本地】
vue项目中常见的错误
07-13
在Vue项目中，有几个常见的错误可能会遇到。以下是一些常见的错误和解决方法： 1. 模块未找到错误（Module not found）：这通常是因为文件路径或模块名称错误导致的。确保你的文件路径和模块引入的名称是正确的，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值