Vue中有一個非常強大的功能是$refs。它允許我們在模板中訪問組件或DOM元素。

除了訪問單個組件或DOM元素，$refs還可以在循環中使用。下面的例子演示了如何在循環中使用$refs。

<template>
<div>
<div v-for="(item, index) in items" :key="index">
<input type="text" :ref="'input-' + index" v-model="item.name">
<button @click="deleteItem(index)">刪除</button>
</div>
<button @click="addItem">添加</button>
</div>
</template>
<script>
export default {
data() {
return {
items: [{ name: 'item 1' }, { name: 'item 2' }, { name: 'item 3' }],
}
},
methods: {
addItem() {
this.items.push({ name: '' })
this.$nextTick(() =>{
const lastIndex = this.items.length - 1
this.$refs['input-' + lastIndex][0].focus()
})
},
deleteItem(index) {
this.items.splice(index, 1)
}
},
}
</script>

在上面的代碼中，我們在循環中使用$refs為每個元素設置引用。我們使用ref的值來為每個元素創建唯一的引用。

在addItems方法中，我們使用$nextTick等待Vue更新DOM，然后使用$refs訪問最后一個元素并將其聚焦。

總體而言，$refs是Vue中一個非常有用的特性，可以方便地訪問組件和DOM元素。在循環中使用$refs的方法可以提高代碼的可讀性和可維護性。