我在使用 uniapp 开发小程序的过程中，遇到了小小的问题。当我勾选 checkbox 后，我会去进行一些校验，若校验没有通过，需要再取消这次的勾选。如下：
<template>
<checkbox-group @change="checkboxChange">
<label>
<checkbox value="cb" :checked="checked" />
选中
</label>
</checkbox-group>
</template>
<script>
export default {
data() {
return {
checked: false,
};
},
methods: {
checkboxChange(event) {
if (Array.isArray(event.detail.value) && event.detail.value.length) {
// 选中的操作
checkOpenId().then((isValid) => {
if (!isValid) {
// 不生效
this.checked = false;
}
});
} else {
this.checked = false;
}
},
},
};
</script>
但我不管怎么设置他的checked属性都不管用。
复选框组件（checkbox 组件） 的问题，因为复选框组件没有 @change 事件，checkbox-group 组件拥有 @change 事件，事件返回的结果是当前复选框组中已经勾选的值，但并未同步修改 checked 属性。该组件是直接切换的组件状态，然后触发的 change 事件，并没有同步更新 checked 属性所绑定的值。所以开关组件默认 checked 属性为 true 的时候，点击组件本身会将组件的状态切换为关，但是 checked 属性的并没有改变。
解决方案就是在 @change 的事件中，首先将 checked 设置为 true，然后再想设置成 false 的时候，就可以生效了。
<script>
export default {
data() {
return {
checked: false,
};
},
methods: {
checkboxChange(event) {
if (Array.isArray(event.detail.value) && event.detail.value.length) {
// 选中的操作
this.checked = true; // 先将其设置true
checkOpenId().then((isValid) => {
if (!isValid) {
this.checked = false;
}
});
} else {
this.checked = false;
}
},
},
};
</script>