# v-forのref配列
breaking
Vue 2 では、v-for の中で ref 属性を記述すると、対応する $refs プロパティに参照の配列を入れます。この動作は、入れ子になった v-for がある場合、曖昧で非効率的になります。
Vue 3 では、この記述では $refs に配列が作成されなくなりました。１つのバインディングから複数の参照を取得するには、関数に ref をバインドします (これは新機能です)。
<div v-for="item in list" :ref="setItemRef"></div>
1
オプション API を使う場合
export default {
data() {
return {
itemRefs: []
}
},
methods: {
setItemRef(el) {
if (el) {
this.itemRefs.push(el)
}
}
},
beforeUpdate() {
this.itemRefs = []
},
updated() {
console.log(this.itemRefs)
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
コンポジション API を使う場合
import { onBeforeUpdate, onUpdated } from 'vue'
export default {
setup() {
let itemRefs = []
const setItemRef = el => {
if (el) {
itemRefs.push(el)
}
}
onBeforeUpdate(() => {
itemRefs = []
})
onUpdated(() => {
console.log(itemRefs)
})
return {
setItemRef
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
注意点
itemRefsは配列である必要はありません。 反復キーで参照できるオブジェクトでも構いません。これにより、必要に応じて
itemRefsをリアクティブにして監視することもできます。
← はじめに 非同期コンポーネント →