vue中el-checkbox要点击两次才切换，或者点击根本不切换

问题：

vue中el-checkbox要点击两次才切换，或者点击根本不切换。

问题代码：

 <el-checkbox v-model="showFrozenAccount" @change="changeShowAccountStatus">xxxxxx</el-checkbox>

  changeShowAccountStatus() {
      this.showFrozenAccount = !this.showFrozenAccount;
      // .............等等
    },

解决方案:

第一种方法：

 <el-checkbox :value="showFrozenAccount" @change="changeShowAccountStatus">xxxxxx</el-checkbox>

  changeShowAccountStatus() {
      this.showFrozenAccount = !this.showFrozenAccount;
      // .............等等
    },

第二种方法:

 <el-checkbox v-model="showFrozenAccount" @change="changeShowAccountStatus">xxxxxx</el-checkbox>

  changeShowAccountStatus() {
      // .............等等
    },

有话要说

查了一下elementUI 关于checkbox的源码：

  <input
        v-else
        class="el-checkbox__original"
        type="checkbox"
        :aria-hidden="indeterminate ? 'true' : 'false'"
        :disabled="isDisabled"
        :value="label"
        :name="name"
        v-model="model"
        @change="handleChange"
        @focus="focus = true"
        @blur="focus = false">
===============================================================
      handleChange(ev) {
        if (this.isLimitExceeded) return;
        let value;
        if (ev.target.checked) {
          value = this.trueLabel === undefined ? true : this.trueLabel;
        } else {
          value = this.falseLabel === undefined ? false : this.falseLabel;
        }
        this.$emit('change', value, ev);
        this.$nextTick(() => {
          if (this.isGroup) {
            this.dispatch('ElCheckboxGroup', 'change', [this._checkboxGroup.value]);
          }
        });
      }
    },

和所想的一样，el-checkbox里面包了一个<input type="checkbox">里面有v-model语法糖，这里v-model的原理就不再赘述了。所以<input>的@input帮我们更改了checkbox的true或者false。通过handleChange能触发我们写的changeShowAccountStatus并且获得更改后的checkbox的值，所以在changeShowAccountStatus中更改showFrozenAccount的值就显得多此一举了。这也是第二种办法的思路。

第一种办法的思路需要继续看一下el-checkbox的源码。看一下model的实现

  computed: {
      model: {
        get() {
          return this.isGroup
            ? this.store : this.value !== undefined
              ? this.value : this.selfModel;
        },
        set(val) {
          if (this.isGroup) {
            this.isLimitExceeded = false;
            (this._checkboxGroup.min !== undefined &&
              val.length < this._checkboxGroup.min &&
              (this.isLimitExceeded = true));
            (this._checkboxGroup.max !== undefined &&
              val.length > this._checkboxGroup.max &&
              (this.isLimitExceeded = true));
            this.isLimitExceeded === false &&
            this.dispatch('ElCheckboxGroup', 'input', [val]);
          } else {
            this.$emit('input', val);//这里！！！！
            this.selfModel = val;
          }
        }
      },

还需要看一下el-checkbox的官方文档

参数	说明
value / v-model	绑定值

所以我们不用v-model用value