刚接触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)绑定的就是组件对象,很好,这没毛病,但是,又白忙活
了。擦,郁闷!
憋了一阵之后,最终版的代码出现了
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 的页面刷新,所以不要随便在 页面编辑的过程中给你的数据结构添加可能导致页面变化的属性。