解决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 hasFocus使用实例
Jun 29 Javascript
ionic实现滑动的三种方式
Aug 27 Javascript
基于vue.js实现侧边菜单栏
Mar 20 Javascript
vue实现登陆登出的实现示例
Sep 15 Javascript
为什么我们要做三份 Webpack 配置文件
Sep 18 Javascript
详解10分钟学会vue滚动行为
Sep 21 Javascript
原生JS实现多个小球碰撞反弹效果示例
Jan 31 Javascript
javascript填充默认头像方法
Feb 22 Javascript
vue数据传递--我有特殊的实现技巧
Mar 20 Javascript
vue使用pdfjs显示PDF可复制的实现方法
Dec 14 Javascript
vue调用语音播放的方法
Sep 27 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
Feb 10 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后台程序与Javascript的两种交互方式
2009/10/25 PHP
php实现留言板功能(会话控制)
2017/05/23 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
php实现微信企业付款到个人零钱功能
2018/10/09 PHP
图片完美缩放
2006/09/07 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
2013/12/27 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
2015/08/12 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
AngularJS入门教程之Scope(作用域)
2016/07/27 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
2016/09/20 Javascript
js实现用户输入的小写字母自动转大写字母的方法
2017/01/21 Javascript
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
独立部署小程序基于nodejs的服务器过程详解
2019/06/24 NodeJs
详解NodeJs项目 CentOs linux服务器线上部署
2019/09/16 NodeJs
Postman环境变量全局变量使用方法详解
2020/08/13 Javascript
jQuery实现计算器功能
2020/10/19 jQuery
如何利用Fabric自动化你的任务
2016/10/20 Python
如何在sae中设置django,让sae的工作环境跟本地python环境一致
2017/11/21 Python
用python做游戏的细节详解
2019/06/25 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
基于Python的自媒体小助手---登录页面的实现代码
2020/06/29 Python
python 密码学示例——凯撒密码的实现
2020/09/21 Python
css3实现元素环绕中心点布局的方法示例
2019/01/15 HTML / CSS
世界领先的在线地板和建筑材料批发商:BuildDirect
2017/02/26 全球购物
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
优秀护士获奖感言
2014/02/20 职场文书
《在家里》教后反思
2014/03/01 职场文书
幼儿园元旦活动感言
2014/03/02 职场文书
大专学生求职信
2014/07/04 职场文书
团组织推优材料
2014/12/29 职场文书
2015年大学班长个人工作总结
2015/04/24 职场文书
导游词之海南天涯海角
2019/12/05 职场文书
Mysql实现主从配置和多主多从配置
2021/06/02 MySQL
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android
Ajax 的初步实现(使用vscode+node.js+express框架)
2021/06/18 Javascript