解决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操作ajax返回的json的注意问题!
Feb 23 Javascript
父子窗体间传递JSON格式的数据的代码
Dec 25 Javascript
javascript中方便增删改cookie的一个类
Oct 11 Javascript
jQuery的cookie插件实现保存用户登陆信息
Apr 15 Javascript
from表单多个按钮提交用onclick跳转不同action
Apr 24 Javascript
JS取得绝对路径的实现代码
Jan 16 Javascript
jquery实现弹出层登录和全屏层注册特效
Aug 28 Javascript
快速学习jQuery插件 Cookie插件使用方法
Dec 01 Javascript
利用python分析access日志的方法
Oct 26 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
Dec 13 Javascript
详解vue-cli 构建Vue项目遇到的坑
Aug 30 Javascript
Vue.js中的组件系统
May 30 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除数取整示例
2014/04/24 PHP
ThinkPHP CURD方法之data方法详解
2014/06/18 PHP
PHP使用CURL实现多线程抓取网页
2015/04/30 PHP
PHP结合Jquery和ajax实现瀑布流特效
2016/01/07 PHP
用HTML/JS/PHP方式实现页面延时跳转的简单实例
2016/07/18 PHP
php ajax数据传输和响应方法
2018/08/21 PHP
安装docker和docker-compose实例详解
2019/07/30 PHP
php array_map()函数实例用法
2021/03/03 PHP
Extjs学习笔记之三 extjs form更多的表单项
2010/01/07 Javascript
超级酷和最实用的jQuery实例收集(20个)
2010/04/21 Javascript
jQuery 表单验证扩展(三)
2010/10/20 Javascript
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
js判断undefined变量类型使用typeof
2013/06/03 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
2016/11/17 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
JS实现利用两个队列表示一个栈的方法
2017/12/13 Javascript
浅谈React中的元素、组件、实例和节点
2018/02/27 Javascript
详解Element-UI中上传的文件前端处理
2019/08/07 Javascript
VUE项目中加载已保存的笔记实例方法
2019/09/14 Javascript
vue实现图片上传功能
2020/05/28 Javascript
[03:21]辉夜杯主赛事 12月25日TOP5
2015/12/26 DOTA
[42:00]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第一场 12.13
2020/12/17 DOTA
django创建自定义模板处理器的实例详解
2017/08/14 Python
Python设计模式之状态模式原理与用法详解
2019/01/15 Python
Django框架 Pagination分页实现代码实例
2019/09/04 Python
Matplotlib绘制雷达图和三维图的示例代码
2020/01/07 Python
Python with标签使用方法解析
2020/01/17 Python
python使用nibabel和sitk读取保存nii.gz文件实例
2020/07/01 Python
安全检查与奖惩制度
2014/01/23 职场文书
教师个人鉴定材料
2014/02/08 职场文书
就业推荐表自我鉴定范文
2014/03/21 职场文书
宾馆安全管理制度
2015/08/06 职场文书
服务器间如何实现文件共享
2022/05/20 Servers