1. bug重现
这里是我data
的结构(不相关代码已经省略):
return {
sizeForm:{
...
tags:[], // 这里...
...
},
}
sizeForm.tags
对应的复选框:
<el-checkbox-group v-model="sizeForm.tags">
<el-checkbox
v-for="data in tags"
:label="data.value"
:key="data.value">
{{data.label}}
</el-checkbox>
</el-checkbox-group>
回显的数据结构,注意返回的数据tgs
和data
中的tags
不同
{
...
"tgs": [
1,
2
],
...
}
回显赋值:
let lat = this;
axios.get("/business/businessUser/one?userId="+this.userId)
.then(function(response){
lat.sizeForm = response.data;
lat.sizeForm.tags = [];
for (let tg of response.data.tgs) {
lat.sizeForm.tags.push(tg)
lat.tagUse[tg] = true
}
})
报错信息:
[Vue warn]: Error in render: "TypeError: undefined is not an object (evaluating 'this.model.length')"
found in
---> <ElCheckbox> at packages/checkbox/src/checkbox.vue
<ElCheckboxGroup> at packages/checkbox/src/checkbox-group.vue
<ElDialog> at packages/dialog/src/component.vue
<Root>
2. 解决方案
有人说:vue定义data中的数组里,如果不使用数组的方法来替换的话,数据是不会被重新渲染的!
我的理解是,改变了data.tags的结构,造成的渲染奔溃,lat.sizeForm.tags = [] 在补救已经无济于事!
正确写法是:
let lat = this;
axios.get("/business/businessUser/one?userId="+this.userId)
.then(function(response){
lat.sizeForm = Object.assign({},response.data,{tags:[]})
for (let tg of response.data.tgs) {
lat.sizeForm.tags.push(tg)
lat.tagUse[tg] = true
}
})