赞
踩
属性名 | 类型 | 默认值 | 说明 |
@change | EventHandle | <checkbox-group> 中选项发生改变触发change事件 detail = { value:[选中的checkbox的value的数组] } |
- <checkbox-group @change="handleEVent()">
- <view style="margin-bottom: 20rpx;">
- <label style="display: flex;align-items: center;width: fit-content;">
- <checkbox value='cxm4s' />
- <text>车信盟出险+4S维保({{orDerPrice1.busAmount==null?0:orDerPrice1.busAmount}})</text>
- </label>
- </view>
- <view style="margin-bottom: 20rpx;">
- <label style="display: flex;align-items: center;width: fit-content;">
- <checkbox value='ydgls' /><text>云端公里数查询({{ydglsPrice.price}})</text>
- </label>
- </view>
- <view style="margin-bottom: 20rpx;">
- <label style="display: flex;align-items: center;width: fit-content;">
- <checkbox value='clztcx' /><text>车辆状态查询({{clztPrice.price}})</text>
- </label>
- </view>
- </checkbox-group>
-
-
- <script setup>
- const handleEVent = (e) => {
- console.log(e)
- }
-
- </script>
运行以上代码之后,点击每一项的时候,控制台输出的都是undefined,并没有实现上述表格所说的拿到value的值。
在@change对应定义的方法中手动传入一个 $event 即可拿到所需要的value的值
- <checkbox-group @change="handleEVent($event)">
- <view style="margin-bottom: 20rpx;">
- <label style="display: flex;align-items: center;width: fit-content;">
- <checkbox value='cxm4s' />
- <text>车信盟出险+4S维保({{orDerPrice1.busAmount==null?0:orDerPrice1.busAmount}})</text>
- </label>
- </view>
- <view style="margin-bottom: 20rpx;">
- <label style="display: flex;align-items: center;width: fit-content;">
- <checkbox value='ydgls' /><text>云端公里数查询({{ydglsPrice.price}})</text>
- </label>
- </view>
- <view style="margin-bottom: 20rpx;">
- <label style="display: flex;align-items: center;width: fit-content;">
- <checkbox value='clztcx' /><text>车辆状态查询({{clztPrice.price}})</text>
- </label>
- </view>
- </checkbox-group>
-
-
- <script setup>
- const handleEVent = (e) => {
- console.log(e)
- }
-
- </script>
这样修改完之后拿到的 e.value.detail = [选中的所有项的value值]
赞
踩
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。