解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题

作者:lnwang123. 时间:2024-05-22 10:28:12 

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

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

解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题

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

解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题

会报accessItemName为undefined;

解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题

原因以及解决办法:

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

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

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

data()中 设置一个空的值或者自定义的值,在数据到达之前显示这个值

例:matterAll:[{accessItemName:""}],还有一个办法,在绑定数据的标签上加“v-if='要回显的字段名'”,也就是当需要显示的数据存在时才显示。

来源:https://blog.csdn.net/weixin_41756473/article/details/82419165

标签:vue,数据加载,undefined
0
投稿

猜你喜欢

  • 深入理解golang chan的使用

    2024-05-10 13:59:06
  • Python3 批量扫描端口的例子

    2021-12-20 05:17:37
  • Python3 中文文件读写方法

    2021-07-14 20:02:39
  • Python实现个人微信号自动监控告警的示例

    2023-02-04 20:03:03
  • matplotlib共享坐标轴的实现(X或Y坐标轴)

    2023-12-01 23:58:12
  • Python3.9又更新了:dict内置新功能

    2023-10-31 23:11:49
  • ASP.NET中FCKEDITOR在线编辑器的用法

    2023-07-04 23:20:38
  • Python基于yield遍历多个可迭代对象

    2023-01-05 23:01:32
  • python模块之re正则表达式详解

    2021-08-15 03:34:52
  • python使用pyaudio录音和格式转化方式

    2023-11-07 19:30:03
  • 让SQL Server数据库自动执行管理任务(二)

    2009-03-20 11:40:00
  • 关于WARNING:Ignoring invalid distribution -pencv-python....警告信息的处理方法(已解决!)

    2021-01-14 18:14:28
  • taro小程序添加骨架屏的实现代码

    2024-04-19 11:04:04
  • 简单了解python字符串前面加r,u的含义

    2021-12-26 19:08:39
  • 网马解密大讲堂——网马解密初级篇

    2009-09-16 14:45:00
  • python简单图片操作:打开\\显示\\保存图像方法介绍

    2021-03-29 15:52:28
  • js删除数组中指定元素的几种方式

    2024-04-10 10:50:48
  • 定位后无法选择容器内容解决方案

    2008-07-28 13:14:00
  • Python爬虫利用多线程爬取 LOL 高清壁纸

    2023-02-10 15:07:25
  • vscode使用markdown无法预览网络图片的解决方法

    2023-09-01 17:46:36
  • asp之家 网络编程 m.aspxhome.com