Vue页面数据加载，如何确保在完成前不中断用户体验？

本文共计395个文字，预计阅读时间需要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，

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