文章目录

• 一、发现问题
• 二、问题解决
• • 方法一
  • 方法二
  • 方法三
• 三、原因解析

---

一、发现问题

在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之后，拿到了数据，组件数据被重新渲染，但是控制台的错误警告依然在。

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