Posted at

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!