解决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继承的实现
Oct 24 Javascript
Javascript 判断 object 的特定类转载
Feb 01 Javascript
jquery图片延迟加载 前端开发技能必备系列
Jun 18 Javascript
jQuery实现图片渐入渐出切换展示效果
Aug 15 Javascript
Bootstrap php制作动态分页标签
Dec 23 Javascript
jQuery中的deferred使用方法
Mar 27 jQuery
Node.js 8 中的 util.promisify的详解
Jun 12 Javascript
详解Vue双向数据绑定原理解析
Sep 11 Javascript
如何在微信小程序中实现Mixins方案
Jun 20 Javascript
vue-model实现简易计算器
Aug 17 Javascript
node koa2 ssr项目搭建的方法步骤
Dec 11 Javascript
vue实现在data里引入相对路径
Jun 05 Vue.js
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
全国FM电台频率大全 - 18 湖南省
2020/03/11 无线电
解决PHP超大文件下载,断点续传下载的方法详解
2013/06/06 PHP
PHP原生函数一定好吗?
2014/12/08 PHP
php使用Image Magick将PDF文件转换为JPG文件的方法
2015/04/01 PHP
详解WordPress中用于合成数组的wp_parse_args()函数
2015/12/18 PHP
PHP8.0新功能之Match表达式的使用
2020/07/19 PHP
JQuery开发的数独游戏代码
2010/10/29 Javascript
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
jquery validate poshytip 自定义样式
2012/11/26 Javascript
jQuery中last()方法用法实例
2015/01/06 Javascript
基于jQuery实现的旋转彩圈实例
2015/06/26 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
基于jquery实现图片放大功能
2016/05/07 Javascript
用JavaScript获取页面文档内容的实现代码
2016/06/10 Javascript
jQuery简单实现遍历单选框的方法
2017/03/06 Javascript
微信小程序 navbar实例详解
2017/05/11 Javascript
vue 2.0封装model组件的方法
2017/08/03 Javascript
基于vue.js快速搭建图书管理平台
2017/10/29 Javascript
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
vue做移动端适配最佳解决方案(亲测有效)
2018/09/04 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
2020/06/02 Javascript
[01:14:34]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第一局
2016/02/28 DOTA
详细探究Python中的字典容器
2015/04/14 Python
详谈Python高阶函数与函数装饰器(推荐)
2017/09/30 Python
python之信息加密题目详解
2019/06/26 Python
python如何实现单链表的反转
2020/02/10 Python
python GUI库图形界面开发之PyQt5复选框控件QCheckBox详细使用方法与实例
2020/02/28 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
奥地利度假券的专家:we-are.travel
2019/04/10 全球购物
植村秀加拿大官网:Shu Uemura加拿大
2019/09/03 全球购物
美国第一大药店连锁机构:Walgreens(沃尔格林)
2019/10/10 全球购物
公务员职业生涯规划书范文  
2014/01/19 职场文书
二手房购房协议书范本
2014/10/05 职场文书
2015年母亲节活动策划方案
2015/05/04 职场文书
Python基于Opencv识别两张相似图片
2021/04/25 Python