原代码:
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: []
}
}