文章目录


一、发现问题

在vue项目中发现报错:[Vue warn]:Error in render: “TypeError: Cannot read property ‘***’ of undefined”

虽然有报错但是对项目没有发现明显影响(我遇到两次都是使用数组中首项属性值时发生,其他情况还需另斟酌)

二、问题解决

两种方法:

方法一

标签中通过v-if="tabsTree[0]"提前截获

<span slot="title" v-if="tabsTree[0].label">{{ tabsTree[0].label }}</span>

方法二

在显示时添加判断截获

tabsTree[0].label?tabsTree[0].label:''

方法三

在data中赋初值,要注意,这样使用可能会出问题。。。

tabsTree:[{label:''}]

三、原因解析

我们在data()方法中初始化了数组后,该初始数据会先传递给组件,在mounted之前,组件会读取初始数据并渲染,但是此时初始数据为undefined。但在mounted之后,拿到了数据,组件数据被重新渲染,但是控制台的错误警告依然在。

当加一个判断截获,就预防了提前取值,也就预防了报错的产生。

Logo

前往低代码交流专区

更多推荐