个人技术分享

checkbox-group属性说明

问题代码

<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值]