解决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 相关文章推荐
jQuery实战之品牌展示列表效果
Apr 10 Javascript
JS嵌套函数调用上下文的问题解决
Mar 26 Javascript
了解Javascript的模块化开发
Mar 02 Javascript
JQuery插件jcarousellite的参数中文说明
May 11 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 Javascript
使用重写url机制实现验证码换一张功能
Aug 01 Javascript
jQuery封装animate.css的实例
Jan 04 jQuery
浅谈vue中改elementUI默认样式引发的static与assets的区别
Feb 03 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
May 06 Javascript
浅谈Vue render函数在ElementUi中的应用
Sep 06 Javascript
vue 实现通过vuex 存储值 在不同界面使用
Nov 11 Javascript
微信小程序实现横向滚动导航栏效果
Dec 12 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检测字符串是否为UTF8编码的常用方法
2014/11/21 PHP
PHP经典面试题集锦
2015/03/19 PHP
php按单词截取字符串的方法
2015/04/07 PHP
Windows下php+mysql5.7配置教程
2017/05/16 PHP
js 替换功能函数,用正则表达式解决,js的全部替换
2010/12/08 Javascript
javascript中的delete使用详解
2013/04/11 Javascript
动态加载js、css等文件跨iframe实现
2014/02/24 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
JavaScript通过字典进行字符串翻译转换的方法
2015/03/19 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
基于jQuery实现的查看全文功能【实用】
2016/12/11 Javascript
js实现图片加载淡入淡出效果
2017/04/07 Javascript
老生常谈ES6中的类
2017/07/31 Javascript
简单谈谈js的数据类型
2017/09/25 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
实用Javascript调试技巧分享(小结)
2019/06/18 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
2020/07/07 Javascript
最基础的Python的socket编程入门教程
2015/04/23 Python
Python批量查询域名是否被注册过
2017/06/21 Python
python数据预处理之将类别数据转换为数值的方法
2017/07/05 Python
Django中使用celery完成异步任务的示例代码
2018/01/23 Python
python+pandas生成指定日期和重采样的方法
2018/04/11 Python
python绘制评估优化算法性能的测试函数
2019/06/25 Python
python中Lambda表达式详解
2019/11/20 Python
flask的orm框架SQLAlchemy查询实现解析
2019/12/12 Python
Python with标签使用方法解析
2020/01/17 Python
pycharm 激活码及使用方式的详细教程
2020/05/12 Python
python map比for循环快在哪
2020/09/21 Python
联想瑞士官方网站:Lenovo Switzerland
2017/11/19 全球购物
季度思想汇报
2014/01/01 职场文书
美术指导助理求职信
2014/04/20 职场文书
张思德观后感
2015/06/09 职场文书
2015大学迎新标语
2015/07/16 职场文书
一次MySQL启动导致的事故实战记录
2021/09/15 MySQL
世界十大狙击步枪排行榜
2022/03/20 杂记