剛接觸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 的頁面刷新,所以不要隨便在 頁面編輯的過程中給你的數據結構添加可能導致頁面變化的屬性。