uniapp 中 checkbox 中的 checked 不生效的方案

我在使用 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>