vue——$nextTick解決節點獲取不到問題

參考：https://www.jianshu.com/p/a7550c0e164f

 

原理： Vue.nextTick用於延遲執行一段代碼，為了在數據變化之后等待 Vue 完成更新 DOM ，可以在數據變化之后立即使用Vue.nextTick(callback) 。這樣回調函數在 DOM 更新完成后就會調用。

 

我的問題：異步獲取數據，循環遍歷，操作dom標簽時獲取不到節點

vue:

<div id="d-list">
    <span class="d-items" v-for="item in list">{{item.name}}({{item.num}})</span>
</div>

原script:

let _this = this;
_this.axios.get('***').then(function(res) {
　　if (res.status == 200 && res.data.result == 0) {
   　　let _data = res.data.message;
       _this.list = _data.list;
        if (_this.list.length > 0) {
           let obj = document.getElementById('d-list'),
              items = document.getElementsByClassName('d-items')[0];
　　　   console.log('obj',obj,'items',items); //obj獲得得到，items為undefined
       }
    } else {
        console.log('fail:' + res.data.error)
    }
}).catch(function(err) {
   console.log('error:' + err);
});

 

解決：利用$nextTick

let _this = this;
_this.axios.get('***').then(function(res) {
　　if (res.status == 200 && res.data.result == 0) {
   　　let _data = res.data.message;
       _this.list = _data.list;
       _this.$nextTick(() => {
       　　if (_this.list.length > 0) {
           　　let obj = document.getElementById('d-list'),
              items = document.getElementsByClassName('d-items')[0];
　　　　　　　　console.log('obj',obj,'items',items);
          }
        })
    } else {
        console.log('fail:' + res.data.error)
    }
}).catch(function(err) {
   console.log('error:' + err);
});