解决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 验证码的实例代码(附效果图)
Mar 22 Javascript
js给页面加style无效果的解决方法
Jan 20 Javascript
js获得参数的getParameter使用示例
Feb 26 Javascript
jQuery插件slides实现无缝轮播图特效
Apr 17 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
Dec 04 Javascript
Angular 根据 service 的状态更新 directive
Apr 03 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
May 13 Javascript
解析浏览器端的AJAX缓存机制
Jun 21 Javascript
JS利用cookies设置每隔24小时弹出框
Apr 20 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
Feb 06 Javascript
element实现合并单元格通用方法
Nov 13 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
Jul 22 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
thinkPHP自动验证机制详解
2016/12/05 PHP
js 事件小结 表格区别
2007/08/13 Javascript
Mootools 1.2教程(2) DOM选择器
2009/09/14 Javascript
niceTitle 基于jquery的超链接提示插件
2010/05/31 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
2013/12/11 Javascript
jQuery 获取兄弟元素的几种不错方法
2014/05/23 Javascript
jQuery实现带滑动条的菜单效果代码
2015/08/26 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
javaScript中定义类或对象的五种方式总结
2016/12/04 Javascript
vue修改vue项目运行端口号的方法
2017/08/04 Javascript
Vue v2.5 调整和更新不完全问题
2017/10/24 Javascript
10个经典的网页鼠标特效代码
2018/01/09 Javascript
vue 使用vue-i18n做全局中英文切换的方法
2018/10/29 Javascript
JavaScript JMap类定义与使用方法示例
2019/01/22 Javascript
js实现秒表计时器
2019/12/16 Javascript
原生JavaScript实现的无缝滚动功能详解
2020/01/17 Javascript
Pyhton中防止SQL注入的方法
2015/02/05 Python
python获取android设备的GPS信息脚本分享
2015/03/06 Python
python字符串中的单双引
2017/02/16 Python
Python编程二分法实现冒泡算法+快速排序代码示例
2018/01/15 Python
解决Django migrate No changes detected 不能创建表的问题
2018/05/27 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
一行python实现树形结构的方法
2019/08/09 Python
Python基础之字符串操作常用函数集合
2020/02/09 Python
使用Matplotlib绘制不同颜色的带箭头的线实例
2020/04/17 Python
详细分析Python垃圾回收机制
2020/07/01 Python
Numpy中np.max的用法及np.maximum区别
2020/11/27 Python
css3 给背景设置渐变色的方法
2019/09/12 HTML / CSS
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
2020/11/17 HTML / CSS
什么是"引用"?申明和使用"引用"要注意哪些问题?
2016/03/03 面试题
大学毕业后的十年规划
2014/01/07 职场文书
学校后勤工作总结2015
2015/05/15 职场文书
高中优秀作文(范文)
2019/08/15 职场文书
解决numpy和torch数据类型转化的问题
2021/05/23 Python
SpringBoot生成License的实现示例
2021/06/16 Java/Android
element tree树形组件回显数据问题解决
2022/08/14 Javascript