解决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 30 Javascript
jQuery遍历对象、数组、集合实例
Nov 08 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
Jan 20 Javascript
jquery实现表单验证简单实例演示
Nov 23 Javascript
javascript实现加载xml文件的方法
Nov 24 Javascript
在使用JSON格式处理数据时应该注意的问题小结
May 20 Javascript
JavaScript requestAnimationFrame动画详解
Sep 14 Javascript
关于Vue单页面骨架屏实践记录
Dec 13 Javascript
使用react实现手机号的数据同步显示功能的示例代码
Apr 03 Javascript
自定义vue组件发布到npm的方法
May 09 Javascript
函数式编程入门实践(一)
Apr 20 Javascript
js代码实现轮播图
May 04 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使用Imagick生成图片的方法
2015/07/31 PHP
PHP数组内存利用率低和弱类型详细解读
2017/08/10 PHP
Yii2框架数据验证操作实例详解
2018/05/02 PHP
Thinkphp 框架扩展之行为扩展原理与实现方法分析
2020/04/23 PHP
laravel与thinkphp之间的区别与优缺点
2021/03/02 PHP
基于JQuery制作的产品广告效果
2010/12/08 Javascript
dwz 如何去掉ajaxloading具体代码
2013/05/22 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
2013/09/02 Javascript
javascript抽象工厂模式详细说明
2014/12/16 Javascript
JavaScript实现点击自动选择TextArea文本的方法
2015/07/02 Javascript
Bootstrap模态框使用详解
2017/02/15 Javascript
vue-cli入门之项目结构分析
2017/04/20 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
2018/09/16 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
2018/09/18 Javascript
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
python获取mp3文件信息的方法
2015/06/15 Python
python 读写txt文件 json文件的实现方法
2016/10/22 Python
Python调用C# Com dll组件实战教程
2017/10/12 Python
Python之ReportLab绘制条形码和二维码的实例
2018/01/15 Python
Python使用random.shuffle()打乱列表顺序的方法
2018/11/08 Python
Python实现的微信支付方式总结【三种方式】
2019/04/13 Python
python3读取图片并灰度化图片的四种方法(OpenCV、PIL.Image、TensorFlow方法)总结
2019/07/04 Python
pandas条件组合筛选和按范围筛选的示例代码
2019/08/26 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
使用pytorch 筛选出一定范围的值
2020/06/28 Python
Python模拟登录和登录跳转的参考示例
2020/10/30 Python
使用CSS3 制作一个material-design 风格登录界面实例
2016/12/12 HTML / CSS
Html5插件教程之添加浏览器放大镜效果的商品橱窗
2016/01/07 HTML / CSS
校本教研工作方案
2014/01/14 职场文书
优秀员工推荐信
2014/05/10 职场文书
2015年安全生产目标责任书
2015/01/29 职场文书
党员身份证明材料
2015/06/19 职场文书
会议承办单位欢迎词
2015/09/30 职场文书
学习弘扬焦裕禄精神心得体会
2016/01/23 职场文书
2016年教师师德师风承诺书
2016/03/25 职场文书
Python实现byte转integer
2021/06/03 Python