Vue.jsで動的にrefにアクセスする方法

refに変数を使いたい

templateにはv-bindディレクティブを使ってv-bind:refや:refと書けばいいことは分かるけど、それに対してscriptでどうアクセスするか分からなくて少しスタックしたのでメモ。

公式にさらっと書いてあるんだけど、分かりづらかった。

v-for で要素/コンポーネントに対して使用されるとき、登録された参照は DOM ノードまたはコンポーネントインスタンスを含んでいる配列になります。
https://jp.vuejs.org/v2/api/#ref

静的なDOMを取得する場合はthis.$refs.hogeだけど、動的に指定した場合は配列として取得できる。
つまりthis.$refs[hoge]でOK。

<template>
    <div>
        <div v-for="item in items" :key="item.id">
            <input type="text" v-model="item.name" :ref="'name' + item.id">
            <button @click="displayRef('name' + input.id)">テキストボックスのrefを確認</button>
            <hr>
            <button @click="displayAllRefs">すべてのrefを確認</button>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                items: [
                    { id: Date.now(), name: 'hoge' }
                ]
            }
        },
        methods: {
            displayRef(ref) {
                console.log(this.$refs[ref]) // 動的なrefにアクセス
            },
            displayAllRefs() {
                console.log(this.$refs) // すべてのrefを確認
            }
        }
    }
</script>

案外参考サイトが見つからなかったけど、これでめでたし。Adios amigos!