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