vue3 composition APIでautofocusを実装する

はじめに

vue3 composition APIでautofocusを実装するのが結構大変だったので忘備録として書いておく。

autofocusの定義

unruffled-roentgen-467661.netlify.app

例えば、componentが更新されたときに、input要素に自動的にフォーカスを当てたいときなどがある。

この新規作成ボタンをクリックして編集モードになったとき、

このinput要素に自動でフォーカスされているとユーザーフレンドリーだと思う。

これを実現したい。

実装方法

結論としては、カスタムディレクティブを使用し、コンポーネントのmount, updateのタイミングでfocusさせればそれで実現できた。

カスタムディレクティブ | Vue.js

autofocusを実現したいコンポーネントに対して、ディレクティブオプションを追加する

  directives: {
    focus: {
        mounted(el) {
          el.focus()
        }
    }
  },

autofocusを追加したいdom要素に対して、v-focusを付与する

<input v-focus type="text">

これで実現できた。