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


Posted in Javascript onNovember 14, 2019

在项目中遇到后台数据还没有加载完毕,但是页面上调用了后台数据中的字段,这样就会报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='要回显的字段名'”,也就是当需要显示的数据存在时才显示。

以上这篇解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 密码强弱度检测万能插件
Feb 25 Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
Sep 15 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
Jun 30 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
May 31 Javascript
关于在Servelet中如何获取当前时间的操作方法
Jun 28 Javascript
Node.js Streams文件读写操作详解
Jul 04 Javascript
jQuery实现的自定义滚动条实例详解
Sep 20 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
Dec 18 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
Jan 04 Javascript
vue.js移动端tab组件的封装实践实例
Jun 30 Javascript
微信小程序实现图片滚动效果示例
Dec 05 Javascript
Vue指令实现OutClick的示例
Nov 16 Javascript
vue 返回上一页,页面样式错乱的解决
Nov 14 #Javascript
Node绑定全局TraceID的实现方法
Nov 14 #Javascript
vue-router结合vuex实现用户权限控制功能
Nov 14 #Javascript
vue router 传参获取不到的解决方式
Nov 13 #Javascript
Vue解析带html标签的字符串为dom的实例
Nov 13 #Javascript
vue props对象validator自定义函数实例
Nov 13 #Javascript
微信小程序获取当前位置和城市名
Nov 13 #Javascript
You might like
php Try Catch异常测试
2009/03/01 PHP
PHP n个不重复的随机数生成代码
2009/06/23 PHP
php用正则表达式匹配中文实例详解
2013/11/06 PHP
mac os快速切换多个PHP版本的方法
2017/03/07 PHP
Discuz不使用插件实现简单的打赏功能
2019/03/21 PHP
PHP MVC框架中类的自动加载机制实例分析
2019/09/18 PHP
PHP基于ip2long实现IP转换整形
2020/12/11 PHP
理解Javascript_09_Function与Object
2010/10/16 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
javascript 获取iframe里页面中元素值的方法
2014/02/17 Javascript
简单的jquery左侧导航栏和页面选中效果
2014/08/21 Javascript
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
JS模拟键盘打字效果的方法
2015/08/05 Javascript
解决jQuery使用JSONP时产生的错误
2015/12/02 Javascript
修改node.js默认的npm安装目录实例
2018/05/15 Javascript
vue props default Array或是Object的正确写法说明
2020/07/30 Javascript
[02:32]DOTA2英雄基础教程 美杜莎
2014/01/07 DOTA
[56:58]VP vs Optic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[32:56]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.11
2020/12/16 DOTA
详解Python中的相对导入和绝对导入
2017/01/06 Python
基于Linux系统中python matplotlib画图的中文显示问题的解决方法
2017/06/15 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
导入tensorflow:ImportError: libcublas.so.9.0 报错
2020/01/06 Python
python爬虫实现获取下一页代码
2020/03/13 Python
检测浏览器是否支持html5视频的代码
2013/03/28 HTML / CSS
俄罗斯在线购买飞机票、火车票、巴士票网站:Tutu.ru
2020/03/16 全球购物
环保建议书
2014/03/12 职场文书
《富饶的西沙群岛》教学反思
2014/04/09 职场文书
投标服务承诺书
2014/05/28 职场文书
优秀共产党员事迹材料
2014/12/18 职场文书
给领导的感谢信范文
2015/01/23 职场文书
爱牙日宣传活动总结
2015/02/05 职场文书
2015年教师节广播稿
2015/08/19 职场文书
Mysql效率优化定位较低sql的两种方式
2021/05/26 MySQL
OpenCV-Python使用cv2实现傅里叶变换
2021/06/09 Python
html解决浏览器记住密码输入框的问题
2023/05/07 HTML / CSS