参考: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); });