解决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 相关文章推荐
JS响应鼠标点击实现两个滑块区间拖动效果
Oct 26 Javascript
浅析node连接数据库(express+mysql)
Nov 30 Javascript
javascript实现无缝上下滚动特效
Dec 16 Javascript
老生常谈JavaScript 正则表达式语法
Aug 20 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
Dec 19 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
Mar 10 Javascript
js遍历获取表格内数据的方法(必看)
Apr 06 Javascript
详解vee-validate的使用个人小结
Jun 07 Javascript
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
JS实现图片上传多次上传同一张不生效的处理方法
Aug 06 Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 Javascript
Vue-CLI项目中路由传参的方式详解
Sep 01 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和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
php处理restful请求的路由类分享
2014/02/27 PHP
Yii操作数据库的3种方法
2014/03/11 PHP
Symfony的安装和配置方法
2016/03/17 PHP
javascript 学习之旅 (3)
2009/02/05 Javascript
JavaScript 克隆数组最简单的方法
2009/02/12 Javascript
jMessageBox 基于jQuery的窗口插件
2009/12/09 Javascript
ASP小贴士/ASP Tips javascript tips可以当桌面
2009/12/10 Javascript
28个JS验证函数收集
2010/03/02 Javascript
JS模拟自动点击的简单实例
2013/08/08 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
2016/06/12 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
2016/08/29 Javascript
Element Input组件分析小结
2018/10/11 Javascript
vue2路由基本用法实例分析
2020/03/06 Javascript
ant design vue datepicker日期选择器中文化操作
2020/10/28 Javascript
[05:02]2014DOTA2 TI中国区预选赛精彩TOPPLAY第三弹
2014/06/25 DOTA
[38:32]完美世界DOTA2联赛循环赛 Forest vs DM 第二场 11.06
2020/11/06 DOTA
python anaconda 安装 环境变量 升级 以及特殊库安装的方法
2017/06/21 Python
Python中getpass模块无回显输入源码解析
2018/01/11 Python
pandas进行数据的交集与并集方式的数据合并方法
2018/06/27 Python
详解通过API管理或定制开发ECS实例
2018/09/30 Python
关于 Python opencv 使用中的 ValueError: too many values to unpack
2019/06/28 Python
Python+appium框架原生代码实现App自动化测试详解
2020/03/06 Python
将pycharm配置为matlab或者spyder的用法说明
2020/06/08 Python
全球领先的鞋类零售商:The Walking Company
2016/07/21 全球购物
美国首屈一指的礼品篮供应商:GiftTree
2018/01/06 全球购物
Moda Operandi官网:美国奢侈品电商,海淘秀场T台同款
2020/05/26 全球购物
string = null 和string = ''的区别
2013/04/28 面试题
汽车专业毕业生推荐信
2013/11/12 职场文书
机关节能减排实施方案
2014/03/17 职场文书
基层党员对照检查材料
2014/09/24 职场文书
慈善献爱心倡议书
2015/04/27 职场文书
公司年会开场白
2015/06/01 职场文书
详解Go语言中Get/Post请求测试
2022/06/01 Golang
Vue3实现简易音乐播放器组件
2022/08/14 Vue.js