当前位置: 首页 > 工具软件 > GROUP-E > 使用案例 >

elementUI中的el-checkbox-group报错Cannot read property ‘length‘ of undefined

邓德惠
2023-12-01

原代码:

template:

            <el-checkbox-group
              v-model="formData.bczlChecked"
              v-for="(item, index) in checkInfo"
              :key="index"
            >
              <el-col :span="24">
                <el-form-item :label="item.label"></el-form-item>
              </el-col>
              <el-col :span="24" v-for="(checks, index2) in item.value" :key="index2">
                <el-form-item label>
                  <el-checkbox :label="checks">{{item.name[index2]}}</el-checkbox>
                </el-form-item>
              </el-col>
            </el-checkbox-group>

script:

data() {
    return {
      formData: {
        bczlChecked: []
      },
    }
}

这样写,在渲染时候,会报错如下:

TypeError: Cannot read property 'length' of undefined
    at VueComponent.isLimitDisabled (element-ui.common.js?5c96:6468)
    at Watcher.get (vue.esm.js?a026:4488)
    at Watcher.evaluate (vue.esm.js?a026:4593)
    at VueComponent.computedGetter [as isLimitDisabled] (vue.esm.js?a026:4845)
    at VueComponent.isDisabled (element-ui.common.js?5c96:6471)
    at Watcher.get (vue.esm.js?a026:4488)
    at Watcher.evaluate (vue.esm.js?a026:4593)
    at VueComponent.computedGetter [as isDisabled] (vue.esm.js?a026:4845)
    at Object.get (vue.esm.js?a026:2104)
    at Proxy.checkboxvue_type_template_id_d0387074_render (element-ui.common.js?5c96:6177)

原因:页面在渲染时候,会给formData.bczlChecked修改掉,可以在watch中查看。

修改:

script:

data() {
    return {
      //formData: {
        bczlChecked: []
      //},
    }
}

即把bczlChecked直接放到data中:

data() {
    return {
        bczlChecked: []
    }
}

 

 类似资料: