el-checkbox-group 点击box 没反应,无法取消勾选(记一次debug的思路)

今天工作时,碰到了项目代码中一个bug,表现出来的效果是:el-checkbox-group 点击 box 没反应,无法取消勾选。

也就是 box 默认是被勾选上的,但是点击取消勾选却没反应。

问题看起来还是比较奇怪,当然,最后bug还是被找出来了,这篇文章就来记录和分享一下我找问题的思路:

  1. 猜想 checkbox 是设置了啥属性不准点?
    但是,印象中如果不能点只有disable样式吧,然后代码中发现并没有这种属性,所以这种可能性排除。

  2. 看看点击 change 事件有没有被触发。

    咦,事件是有被触发的,所以按理说,取消勾选应该是有效果的,但是现在实际情况是没有效果,所以我的想法是,这个checkbox对应的数据,又被添加了checkbox-group所对应的数组中,才会导致checkbox还是勾选状态。
    所以接下来就应该看看是哪里导致了数据被重新添加。

  3. 最后代码排查发现,问题确实出在checkbox-group所对应的数组,但并不是因为数据被重复添加了,而是因为checkbox-group对应的数组中,本来有重复的值,也就是说存在多个checkbox,彼此对应的值是一样的,所以就导致了取消勾选没反应。

至此,问题的根源算是找出来了。


本文仅作为一个记录,如果能帮到遇到同样问题的你,那是再好不过了。
如果发现我说的有哪些地方是错误的,还望及时指正 😊

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值