for里面调用方法 vue_Vue.js 监控v-for循环渲染完成后再执行方法

本篇记录一下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获取到的数据

}

})