记录vant中checkbox组件中的一个坑

2,857 阅读1分钟

当给checkbox组件绑定v-model时,如果在checkbox外层有checkboxGroup则这时只能获取到checkboxGroup对应的change事件,checkbox的change事件则会始终无效(click事件一直有效),无法选中。去掉checkboxGroup才会执行checkbox的change事件。因为我要做多个checkbox的互斥效果,又强迫症写了一套checkboxGroup+checkbox所以当时困扰了许久。灵光一闪去掉了checkboxGroup才可以了,除了这样写以外要实现选项互斥代码就很麻烦了。 比如:

<van-checkbox-group icon-size="24px" v-model="XXX" checked-color="#00A27F" @change="handleCheckboxChange">
    <van-checkbox
        v-for="(optionItem, optionIndex) in Options"
        :key="optionIndex"
        :name="optionItem.name"
        v-model="optionItem.value"
        shape="square"
        >{{ optionItem.label }}
    </van-checkbox>
</van-checkbox-group>

这样写法则是只能获取到checkboxGroup对应的change事件和v-model。只能是下面的写法:

    <van-checkbox
        v-for="(optionItem, optionIndex) in Options"
        :key="optionIndex"
        :name="optionItem.name"
        v-model="optionItem.value"
        shape="square"
        icon-size="24px"
        checked-color="#00A27F" 
        @change="handleCheckboxChange"
        >{{ optionItem.label }}
    </van-checkbox>

也可能是太菜了,太久没用这个组件了。