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




免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM