本篇记录一下Vue.js 监控v-for循环渲染完成后再执行方法。
再项目开发中经常会遇到v-for循环渲染完成后需要设置某些元素选中或者其它一些特有样式。
以前都 是用setTimeout实现。
但for的数据源是通过ajax获取,获取的时间不稳定，导致setTimeout执行时,还没有渲染完毕.
今天我记得一下其它方式 watch + vm.nextTick
自游互动
{{ item }}
vm = new Vue({
el:'.app',
data: {
dataList: [],
},
watch:{
//与上面的dataList 名字保持一制
dataList: function() {
/*DOM还没更新*/
this.$nextTick(function(){
/*DOM更新了*/
/*现在数据已经渲染完毕*/
})
}
},
mounted:function() {
//ajax获取数据相关代码就不写了,按自己需求写就可以了
//主要代码是上面的watch 里面的代码
//this.DataList = ajax获取到的数据
}
})
