欢迎光临
我们一直在努力

Vue.js 监控v-for循环渲染完成后再执行方法

本篇记录一下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>

 

赞(0)
未经允许不得转载:自游互动 » Vue.js 监控v-for循环渲染完成后再执行方法
分享到: 更多 (0)

自由技术,自由自在

项目合作联系我们