解决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获得选中文本内容的方法
Dec 02 Javascript
js 未结束的字符串常量错误解决方法
Jun 13 Javascript
jquery动态加载js三种方法实例
Aug 03 Javascript
jquery更换文章内容与改变字体大小代码
Sep 30 Javascript
js操作table示例(个人心得)
Nov 29 Javascript
javascript数组操作总结和属性、方法介绍
Apr 05 Javascript
jQuery中focus事件用法实例
Dec 26 Javascript
Node.js开启Https的实践详解
Oct 25 Javascript
vue服务端渲染的实例代码
Aug 28 Javascript
简单理解Vue中的nextTick方法
Jan 30 Javascript
vue实现简单的日历效果
Sep 24 Javascript
js实现select下拉框选择
Jan 11 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扩展程序实现守护进程
2015/04/16 PHP
PHP中Session可能会引起并发问题
2015/06/26 PHP
两种php给图片加水印的实现代码
2020/04/18 PHP
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
2007/11/30 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
2011/03/05 Javascript
js onload事件不起作用示例分析
2013/10/09 Javascript
js函数返回多个返回值的示例代码
2013/11/05 Javascript
jquery制作居中遮罩层效果分享
2014/02/21 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
在JavaScript中操作时间之getMonth()方法的使用
2015/06/10 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
2016/03/07 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
2016/05/31 Javascript
简单实现js放大镜效果
2017/07/24 Javascript
iphone刘海屏页面适配方法
2019/05/07 Javascript
JS实现提示框跟随鼠标移动
2019/08/27 Javascript
Python中使用platform模块获取系统信息的用法教程
2016/07/08 Python
PyQT实现菜单中的复制,全选和清空的功能的方法
2019/06/17 Python
把django中admin后台界面的英文修改为中文显示的方法
2019/07/26 Python
Python中Unittest框架的具体使用
2019/08/27 Python
Python pandas库中的isnull()详解
2019/12/26 Python
Pytorch之卷积层的使用详解
2019/12/31 Python
Python3 读取Word文件方式
2020/02/13 Python
django之从html页面表单获取输入的数据实例
2020/03/16 Python
python实现与redis交互操作详解
2020/04/21 Python
Python抓包并解析json爬虫的完整实例代码
2020/11/03 Python
Python基于tkinter canvas实现图片裁剪功能
2020/11/05 Python
python 下载文件的几种方法汇总
2021/01/06 Python
css3绘制天猫logo实现代码
2012/11/06 HTML / CSS
Css3圆角边框制作代码
2015/11/18 HTML / CSS
html5+css3之制作header实例与更新
2020/12/21 HTML / CSS
澳大利亚第一的设计师礼服租赁网站:GlamCorner
2017/08/13 全球购物
法国发饰品牌:Alexandre De Paris
2018/12/04 全球购物
本科生学习总结的自我评价
2013/10/02 职场文书
探矿工程师自荐信
2014/01/24 职场文书
理财投资建议书
2014/03/12 职场文书
文员岗位职责范本
2015/04/16 职场文书