vue 在v-for列表动态添加ref，并获取对应元素

vue 在v-for列表动态添加ref，并获取对应元素

vue中的ref对于操作dom非常方便，可以直接通过给div加ref，在方法里通过this.$refs.ref的name获取

<template>
	<div class="nav" ref="nav">   // 给div加ref

	</div>
</template>

<script>
	export default {
		methods: {
			handleData() {
				this.$refs.nav   // 获取dom
			}
		},
	}
</script>

对于v-for渲染的动态元素，可以通过设置相同的ref，并通过索引获取

<template>
	<div class="nav" ref="nav">   // 给div加ref
		<li 
			v-for="(items,index) of item.datas" 
			ref="navlist" 
			@click="newsNavBtn(index)" 
			:class="{active:actives==items.id}"
		>
			{{items.name}}
		</li>
	</div>
</template>

<script>
	export default {
		methods: {
			newsNavBtn(index) {
				console.log(this.$refs.navlist)
			}
		},
	}
</script>

控制台输入结果如下：

可以看到，此时的this.$refs.navlist是一个数组，而我们要获取的是每一个dom元素，因此，只用在数组加上索引即可
即

newsNavBtn(index) {
	console.log(this.$refs.navlist[index])
}

输出结果如下：

vue文档介绍ref的时候有一句话：
当 ref 和 v-for 一起使用的时候，你得到的引用将会是一个包含了对应数据源的这些子组件的数组。