如何避免在vue页面数据未加载完成时调用数据？

本文共计402个文字，预计阅读时间需要2分钟。

在项目中遇到后端数据尚未加载完成的情况，但页面已调用后端数据中的字段，这样会导致报错undefined。例如：一进入页面直接显示数据。我在created中请求接口进行赋值+this.matterAll=[]。

在项目中遇到后台数据还没有加载完毕，但是页面上调用了后台数据中的字段，这样就会报undefined。

例如：一进入页面直接回显数据。

我在created里面请求接口进行赋值 this.matterAll=[];

会报accessItemName为undefined；

原因以及解决办法：

在上面data()中，我定义了matterAll:[],也就是空的数组，

template中，我又直接用了this.matterAll[0]，这个时候this.matterAll[0]=undefined，所以this.matterAll[0].accessItemName也是undefined，

需要注意的是，是先进行页面渲染再获取数据，也就是数据还没到就会渲染一次，数据到了再渲染一次，第一次渲染的时候就报错了。