vue报错Error in render: "TypeError: Cannot read property ‘name’ of undefined"
当在vue中遇到这种错时,就意味着你使用了三层对象 a.b.c (或a[b].c)
例如: {{ obj[scope.row.appId].appName }}
<my-table
:data="list"
:pagination.sync="pagination"
:selection.sync="selection"
select-mode="single"
:columns="confColm"
@select-changed="select"
@pagination-changed="reload({})"
>
<template slot="appId" slot-scope="scope">
<div>{{ obj[scope.row.appId].appName }} </div>
</template>
<template slot="appRoleId" slot-scope="scope">
<div>{{ obj[scope.row.appId].sysRoles[scope.row.appRoleId] }}</div>
</template>
<template slot="attachedAppId" slot-scope="scope">
<div>{{ obj[scope.row.attachedAppId].appName }}</div>
</template>
mytable是封装的table组件,在插槽中使用了三层对象。
由于接口是异步请求的,我们获取接口中的数据并赋值给obj之前,页面已经在渲染,此时的obj在data
中肯定是赋值为空的,所有页面渲染的时候obj[scope.row.appId] 不会报错而是undefied,而三层对象
obj[scope.row.appId].appName 就会报错。
// 页面开始渲染并去读取三层对象obj[scope.row.appId].appName的时候,obj是还没被赋值,是空的
data() {
return {
obj: {},
}
// 页面渲染结束了,才成功赋值给obj
getObj() {
getSysRoles().then(res => {
let arr = res.data;
arr.forEach(el => {
this.obj[el.appId] = { appName: el.appName, sysRoles: el.sysRoles };
});
console.log(this.obj, 222);
});
},
解决办法:
1:把获取obj的方法放在渲染组件前,例如my-table这个组件是我点击查询的时候才去调用渲染并读取三层对象
obj[scope.row.appId].appName,于是获取obj的方法就放在created的时候去执行,让obj在读取三层对象的时候
不为空。(推荐)
2.加v-if判断,有的时候才去渲染,但不太完美,虽然不报错但有时候会渲染不出来。
<template slot="appId" slot-scope="scope" v-if='obj[scope.row.appId]'>
<div>{{ obj[scope.row.appId].appName }}</div>
</template>