# 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>

オプション API を使う場合

export default {
  data() {
    return {
      itemRefs: []
    }
  },
  methods: {
    setItemRef(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

コンポジション API を使う場合

import { ref, onBeforeUpdate, onUpdated } from 'vue'

export default {
  setup() {
    let itemRefs = []
    const setItemRef = el => {
      itemRefs.push(el)
    }
    onBeforeUpdate(() => {
      itemRefs = []
    })
    onUpdated(() => {
      console.log(itemRefs)
    })
    return {
      itemRefs,
      setItemRef
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

注意点

itemRefs は配列である必要はありません。反復キーで参照できるオブジェクトでも構いません。
これにより、必要に応じて itemRefs をリアクティブにして監視することもできます。

← はじめに非同期コンポーネント →

# v-forのref配列 breaking

# v-forのref配列
breaking