使用elementUI中的el-checkbox遇上Cannot read property ‘length‘ of undefined错误应该怎么办?

在使用el-checkbox时遇上这样的错误:

TypeError: Cannot read property ‘length’ of undefined
at VueComponent.isLimitDisabled (element-ui.common.js?ccbf:6452)
at Watcher.get (vue.esm.js?efeb:4482)
at Watcher.evaluate (vue.esm.js?efeb:4587)
at VueComponent.computedGetter [as isLimitDisabled] (vue.esm.js?efeb:4839)
at VueComponent.isDisabled (element-ui.common.js?ccbf:6455)
at Watcher.get (vue.esm.js?efeb:4482)
at Watcher.evaluate (vue.esm.js?efeb:4587)
at VueComponent.computedGetter [as isDisabled] (vue.esm.js?efeb:4839)
at Object.get (vue.esm.js?efeb:2104)
at Proxy.checkboxvue_type_template_id_d0387074_render (element-ui.common.js?ccbf:6161)

在template中,我的这样绑定的:

<th>举例:</th>
<td>
  <el-form-item prop="creditCheckFlg">
     <el-checkbox-group v-model="form.creditCheckFlg">
       <el-checkbox :label="'栗子1'"></el-checkbox>
       <el-checkbox :label="'栗子2'"></el-checkbox>
       <el-checkbox :label="'栗子3'"></el-checkbox>
       <el-checkbox :label="'栗子4'"></el-checkbox>
     </el-checkbox-group>
   </el-form-item>
</td>

在data选项中:

data() {
    return {
      form: {
      	creditCheckFlg:''
      }
   }
}

然后我感觉是因为层级太深的原因,然后报了8个关于checkbox的错误。
之后我把和chckbox绑定的数据放在了外层,然后就没有报错了。

<th>举例:</th>
<td>
  <el-form-item prop="creditCheckFlg">
     <el-checkbox-group v-model="creditCheckFlg">
       <el-checkbox :label="'栗子1'"></el-checkbox>
       <el-checkbox :label="'栗子2'"></el-checkbox>
       <el-checkbox :label="'栗子3'"></el-checkbox>
       <el-checkbox :label="'栗子4'"></el-checkbox>
     </el-checkbox-group>
   </el-form-item>
</td>

在data选项中:

data() {
    return {
      	creditCheckFlg:''
   }
}

时隔多年~

解决方案1:
原先就在data里面定义好对应的checkbox的v-model的值 定义为一个空数组
解决方案2:
如果v-model的绑定值是动态渲染的,就手动再次设置表单对应checkbox的绑定值初始值为空数组


版权声明:本文为louting249原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。