踩坑 :vue2 ajax异步请求数据,层数太多,页面无法渲染
刚接触vue2不是太久,勉强算是小白一枚吧,在此分享一下我最近踩的一个坑,望以后的小白们借鉴;
首先,数据结构:
data(){
return {
outer: {
mid: [{
inner: ""
}]
}
}
},
数据大致就是这样子,反正封了很多层,至于为什么这么分,大概是因为惯性思维的原因,里层的东西一定都是包含于外层,下意识的就这么写了,简直害死人,不过,这些都不是重点,重点在后面的数据更新以及页面渲染,嗯,最开始我是这么写的
queryInfo (index){ var condition = ...., http.api({ url: '/tv/orderForm/ClickDetail', params: condition, successCallback: function (data) { this.outer.mid[index].inner = data; }.bind(this) })} (http.api只是公司的老前辈们将ajax请求进行了一下封装,由于这不是重点,就不说了。)以一个android开发出身的我来看,这代码看上去没毛病啊,但是运行之后发现虽然inner的值确实改变了,但是页面就是不渲染,我靠,这是肿么了,先百度一波,然后代码就成了这样
queryInfo (index){ var condition = ....; http.api({ url: '/tv/orderForm/ClickDetail', params: condition, successCallback: function (data) { this.$set(this.outer.mid[index], 'inner' ,data); }.bind(this) })}
都说,当数据不是data的第一层,而是包了几层之后,=赋值是不会触发页面渲染的,要用$set(obj,key,val),但是结果还是然并卵,接着百度,偶然之间看到一个标题,vue ajax请求提前渲染什么的,大致说的是,ajax请求一般是异步的,vue并不知道你在这里发了ajax请求,所以就不会说等到你执行完毕完成赋值之后再渲染,所以值虽然附近去了,但是页面上显示的还是原来的,恩,讲的好有道理啊,但是木有讲怎么解决啊,于是,下面这个版本的代码又出来了
queryInfo (index){ var condition = ....; var self = this; http.api({ url: '/tv/orderForm/ClickDetail', params: condition, successCallback: function (data) { self.$set(self.outer.mid[index], 'inner' ,data); } })} 就是在发送请求之前,使用一个中间变量将this,也就是vue对象保存了一下,原理是什么的,大家可以看看这个https://segmentfault.com/q/1010000007376594?_ea=1326047,不过,发现这样写了之候还是没有刷新出来,因为要提前保存this的原因是ajax请求中的this的指的并不是组件了,但是看了一下公司封装的http,通过.bind(this)绑定的就是组件对象,很好,这没毛病,但是,又白忙活了。擦,郁闷! 憋了一阵之后,最终版的代码出现了 <div v-show="false">{{updateLog}}</div> data(){ return { updateLog: 1, outer: {...} } } queryInfo (index){
var condition = ....; var self = this; http.api({ url: '/tv/orderForm/ClickDetail', params: condition, successCallback: function (data) { self.$set(self.outer.mid[index], 'inner' ,data); self.updateLog = self.updateLog + 1; } }) }
大致就是在data的最外层加上了一个updateLog对象,并在template模板中进行了数据绑定,最后在ajax请求中进行了数据更新,促使页面渲染(数据之后一层的时候是会重新渲染的),到这里,问题完美解决,虽然是取了巧,但是达到了预期的效果。 所以:以后写数据结构千万不要惯性的一层包一层,能拿出来就拿出来,不能拿出来想办法把它拿出来,实在没办法了,就可以像我这样取个巧了。 这个坑就踩到这里了,希望对以后来踩坑的小伙伴们有帮助,当然,也欢迎各位大神们的指点:) 补充于18年1月15日: 数据改变页面不刷新,很大可能是因为绑定的数据模型最初是没有这个属性的,如一个 student , 绑定的时候只有 name 和 id 属性,后来在 vue 页面编辑的过程中又给他添加了一个 age 属性,这是候你的这个 age 变化就不会触发 vue 的页面刷新,所以不要随便在 页面编辑的过程中给你的数据结构添加可能导致页面变化的属性。
转载于:https://www.cnblogs.com/hugystudy/p/7081463.html
踩坑 :vue2 ajax异步请求数据,层数太多,页面无法渲染相关推荐
- html弹窗赋值给查询框,bootstrap模态框动态赋值, ajax异步请求数据后给id为queryInfo的模态框赋值并弹出模态框(JS)...
/查询单个 function query(id) { $.ajax({ url : "/small/productServlet", async : true, type : &q ...
- JAVA中.jsp模板文件AJAX异步请求 - 数据渲染问题
JAVA中.jsp模板文件AJAX异步请求 - 数据渲染失败,谁的过失? 后端已经查询出来结果,但是返回的API接口response查看不到对应的信息.(即:后台有,前台没有) 原因分析: 是因为AJ ...
- 解决ajax异步请求数据后swiper不能循环轮播(loop失效)问题、滑动后不能轮播的问题。
解决ajax异步请求数据后swiper不能循环轮播(loop失效)问题.滑动后不能轮播的问题. 参考文章: (1)解决ajax异步请求数据后swiper不能循环轮播(loop失效)问题.滑动后不能轮播 ...
- AJAX 异步请求数据
AJAX 的全称是Asynchronous JavaScript and XML,其中,Asynchronous 是异步的意思,它有别于传统web开发中采用的同步的方式. JQuery AJAX ...
- ajax异步请求验证ua的网页,ajax 异步请求数据
点击页面 事件.获取新的列表 获取列表 // 因为是测试所以请求页面和参数都写死了 PHP 部分 分为两个.一个是第一次请求的php页面,别一个是异步请求的php页面 index.php $list ...
- 通过Ajax异步请求数据
通过XMLHttpRequest对象的send()方法实现 <!DOCTYPE html> <html lang="en"> <head>< ...
- python django异步访问_初试Ajax异步请求(基于Django框架)
概要: Ajax异步请求数据之前就听朋友提起过,但是之前一直没有什么机会使用这个技术,就没有去了解,后面在做网站评论这一功能时,为了使用户评论之后不用刷新网页就能够看到刚刚评论的数据,所以决定使用Aj ...
- jquery的ajax异步请求接收返回json数据
jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以.这篇文 ...
- ajax异步请求,以及ajax异步返回的数据的处理方案
为什么JS会有同步任务和异步任务: js是单线程,会按照顺序执行一个一个的任务,如果遇到某个任务像网络请求一类的需要延长执行回调函数,那么页面就会阻塞,所以引入了异步的概念. 同步任务:同步任务不需要 ...
最新文章
- python真的有用吗-你真的认为python有那么好吗
- Hibernate Shards 数据的水平、垂直切割(二)- Hibernate Shards基本演示
- 训练集数量对神经网络光谱的影响
- 子界类型的定义和应用
- 肖仰华 | 做个“有知识”的机器人
- 计算机视觉,不可能凉!
- 工作不饱和 ? 给你 8 个程序员接私活的网站
- sqlalchemy mysql教程_SQLAlchemy 教程 —— 基础入门篇
- Safe3通用远程溢出漏洞扫描系统
- svn版本管理软件——创建svn私人仓库
- 隐藏桌面上计算机图标不见了怎么办,电脑的快捷图标不见了怎么办
- 【Day5.3】斯里兰卡风格的崖差蒙空寺
- 平均年薪60.8万,Linux开发拿下这个证书有多吃香?
- 软件测试 | 生命周期
- 少儿编程行业前景分析
- Dozer-Mapping
- 国际品牌商为何钟爱天猫国际而冷落京东全球购?
- 计算机程序设计中数学,数学思维在计算机程序设计中的体现
- SqlServer 2019 数据备份还原教程(图文)
- Python300集,手把手教学
热门文章
- Java创建数组的三种方法
- 【我的Android进阶之旅】解决Android Studio启动时报错:Java 1.8 or later is required.
- oracle archivelog模式与非archivelog模式转换
- 成功进行微博营销的几点技巧
- 多数大数据项目都以失败而告终的原因
- windows网络负载平衡
- linux相等路径,关于linux:如何检查Bash中两条路径是否相等?
- 火力发电厂与变电站设计防火规范_建筑内部装修设计防火规范-GB 50222-2017
- 4G EPS 中的小区选择
- 在 ThinkPad E470 上安装 Ubuntu 16.04 无线网卡驱动