当前位置:   article > 正文

使用uniapp内置组件checkbox-group所遇到的问题_uniapp 中checkbox发生改变事件?

uniapp 中checkbox发生改变事件?

checkbox-group属性说明

属性名类型默认值说明
@changeEventHandle

<checkbox-group> 中选项发生改变触发change事件

detail = { value:[选中的checkbox的value的数组] }

问题代码

  1. <checkbox-group @change="handleEVent()">
  2. <view style="margin-bottom: 20rpx;">
  3. <label style="display: flex;align-items: center;width: fit-content;">
  4. <checkbox value='cxm4s' />
  5. <text>车信盟出险+4S维保({{orDerPrice1.busAmount==null?0:orDerPrice1.busAmount}})</text>
  6. </label>
  7. </view>
  8. <view style="margin-bottom: 20rpx;">
  9. <label style="display: flex;align-items: center;width: fit-content;">
  10. <checkbox value='ydgls' /><text>云端公里数查询({{ydglsPrice.price}})</text>
  11. </label>
  12. </view>
  13. <view style="margin-bottom: 20rpx;">
  14. <label style="display: flex;align-items: center;width: fit-content;">
  15. <checkbox value='clztcx' /><text>车辆状态查询({{clztPrice.price}})</text>
  16. </label>
  17. </view>
  18. </checkbox-group>
  19. <script setup>
  20. const handleEVent = (e) => {
  21. console.log(e)
  22. }
  23. </script>

问题描述

运行以上代码之后,点击每一项的时候,控制台输出的都是undefined,并没有实现上述表格所说的拿到value的值。

问题解决

在@change对应定义的方法中手动传入一个 $event 即可拿到所需要的value的值

实现代码

  1. <checkbox-group @change="handleEVent($event)">
  2. <view style="margin-bottom: 20rpx;">
  3. <label style="display: flex;align-items: center;width: fit-content;">
  4. <checkbox value='cxm4s' />
  5. <text>车信盟出险+4S维保({{orDerPrice1.busAmount==null?0:orDerPrice1.busAmount}})</text>
  6. </label>
  7. </view>
  8. <view style="margin-bottom: 20rpx;">
  9. <label style="display: flex;align-items: center;width: fit-content;">
  10. <checkbox value='ydgls' /><text>云端公里数查询({{ydglsPrice.price}})</text>
  11. </label>
  12. </view>
  13. <view style="margin-bottom: 20rpx;">
  14. <label style="display: flex;align-items: center;width: fit-content;">
  15. <checkbox value='clztcx' /><text>车辆状态查询({{clztPrice.price}})</text>
  16. </label>
  17. </view>
  18. </checkbox-group>
  19. <script setup>
  20. const handleEVent = (e) => {
  21. console.log(e)
  22. }
  23. </script>

这样修改完之后拿到的 e.value.detail = [选中的所有项的value值]

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/盐析白兔/article/detail/671898
推荐阅读