zukucode
主にWEB関連の情報を技術メモとして発信しています。

Vue.js コンポーネントで初期フォーカスを設定する

Vue.jsで初期フォーカスを設定する方法を紹介します。

例えばモーダル画面が表示された時、モーダルのコンポーネントの中のテキストボックスにフォーカスを当てたい場合などがあります。

以下のように、ref属性を指定すると、JavaScriptgetElementByIdで取得したときのように、elementとしてコントロールにアクセスできるようになります。

<input type="text" ref="text1">

this.$refs.コントロール名の形式アクセスします。focusの処理は通常のJavaScriptと同じです。

this.$refs.text1.focus();

注意点

初期フォーカスなので、コンポーネントが作成されたタイミングで処理を行うことになります。

createdのイベントだとまだ要素にアクセスできない状態なので、初期フォーカスをしたい場合はmountedのイベントで行う必要があります。

<template>
  <input type="text" ref="text1">
</template>

<script>

export default {
  created () {
    this.$refs.text1.focus(); // NG
  },
  mounted () {
    this.$refs.text1.focus(); // OK
  }
}
</script>


関連記事