Vue.js / Nuxt.js

【Vue.js】特定の要素に動的にfocusを当てる

カレー

Vue.jsで、特定のフォーム要素とかに動的にfocusを当てたときにちょっと詰まったのでメモ

基本的には特定の要素のrefsを指定して参照する、でOK

  • HTML
<input ref="focusInput">
<button type="button" @click="onClickFocus()">フォーカスを当てる</button>
  • Vue.js
methods: {
    onClickFocus() {
     // ここでrefの値 (=focusInput) を参照する
     this.$refs.focusInput.focus()
    },
},

focusが効かない場合・・・

例えば、focusを当てる前にモーダルを表示したり、他の要素を変更したりした場合
DOMが変更される前にfocusが実行されてしまい動かない場合がある・・・

こういう時はDOMが変更された後に実行するように明示してあげるとOK

  • Vue.js
methods: {
    onClickFocus() {
     // ここでDOMの変更などを行う場合
     this.isShow = true
     // ここでrefの値 (focusInput) を参照する
     this.$nextTick(() => this.$refs.focusInput.focus())
    },
},

VueはDOMの更新を非同期で行うため、順番が前後してうまく動いてくれない場合がある
そんな時活用できるのが nextTick関数
(公式ドキュメントはこちら)

これを使用するとDOMの更新が完了した後に実行してくれるのでとても便利

\ 案件のご依頼・ご相談はこちらから /