复选框返显不选中后不能重新选中

问题描述

解决方案

$nextTick
作用：vue中的nextTick()是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用$nextTick()，则可以在回调中获取更新后的 DOM。

forceUpdate
作用：在Vue官方文档中指出，$forceUpdate具有强制刷新的作用，迫使vue实例重新（rander）渲染虚拟dom，注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。
 

<el-col :span="6">
          <el-form-item prop="checkbox" label-width="110px">
            <el-checkbox 
                v-model="addPayOffForm.checkbox" 
                @change="chengeCheckbox" 
                class="labelStyle">
              是否代办：
            </el-checkbox>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item 
            prop="proxyUnitName" 
            label="代办单位名称" 
            label-width="90px">
            <el-input 
              v-model="addPayOffForm.proxyUnitName"
              :disabled="!addPayOffForm.checkbox"></el-input>
          </el-form-item>
        </el-col>

// 选择代办时
    chengeCheckbox(val){
      this.addPayOffForm.checkbox=val;
      if(!val){
        this.addPayOffForm.proxyUnitName="";
      }
      this.$nextTick(() => {
        this.$forceUpdate()
      })
    },