【Vue3】ref属性を使ってfocusメソッドで要素にフォーカスする - Qiita

vue3でWEBアプリを開発している時、ページを開いた時に特定のinput要素へすぐ文字入力ができる環境を作りたくなった。 色々調べてみたところ、vue2ではtemplate内の該当する要素にはref属性を指定し、scriptには$refsを使ってfocusメソッドを使うとのことだった。 ただ、vue3だと勝手が違ってつまづいたので、備忘録的にまとめておく。 環境 ・vue3(Composition-API） ・VS code 結論 templateでは、 ・フォーカスさせたいinput要素に「ref」属性を設定する。 scriptでは、 ・setup()内でref属性に指定する変数を初期値「ref()」として新規作成する ・関数を作成し、 「input要素に指定したrefの変数名」.focus(); を記述。 これでref属性を設定した要素タイプの取得と、そこを目印にfocusさせるため