当给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>
也可能是太菜了,太久没用这个组件了。