checkbox-group属性说明
属性名 | 类型 | 默认值 | 说明 |
@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值]