记录VUE 表格中得每一行数据加计数器 选中后更改计数器,选中得到得数据不会改变得问题

1.由于公司业务需求,需要实现一个加入购物车的功能,于是产生了一个关于选中数据后修改商品数量,修改数量后选中后的数据不会发生改变的问题。具体功能界面如下:

问题阐述:

   在VUE得表格中加入了计数器,为了防止用户自己自由的输入,所以导致了一个问题,当第一遍选中数据以后,由于已经获取到了这一条得数据,然后再选中得情况下,修改了计数器中的数量,发现选中后的数据并没有发生变化,依然是之前未修改的数据。

问题分析:

  这个逻辑也很简单,就是因为再选中数据后,已经将选中数据的结果赋值给了数组,但是在没有取消选中的情况下改变了计数器中的值,由于选中状态并没有发生变化,所以导致选中的数据依然是之前没有发生变化的内容。于是解决问题的思路就有了

解决思路:

分析该问题后可以发现,想解决该问题有几个思路

1.重新渲染数据选中状态

2.在选中数据后重新覆写数量的值

具体解决方法:

上面两种解决方式第一项在用户角度考虑实际上是不太受用户喜欢的,因为重新渲染取消选中需要用户重新操作一下选中,所以这里提供了第二种解决问题的办法:

第一步:获取选中数据中的数据

首先定义一个ids1的数组来存放自己想要获取的数据项

第二步:在计数器的chang方法中覆写数量值

该方法的意思是在计数器发生变化时触发了 handleChange 方法,然后在该方法中获取到上面 定义名字为 ids1 的选中项数据,然后在计数器发生变化时获取该列的ID 再将该列的ID与 选中数据中所有数据的ID进行匹配,如若发生计数器发生变化的ID存在与被选中的数组中,则找出该数据位于数组中的位置,在对该数据中的数量进行覆写

至此 大功告成。由于本人之前一直是后端开发,最近接触全栈,所以遇到了很多较为基础的问题所以记录下来与大家共同学习

  • 7
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值