Vue.js コンポーネントで初期フォーカスを設定する
Vue.jsで初期フォーカスを設定する方法を紹介します。
例えばモーダル画面が表示された時、モーダルのコンポーネントの中のテキストボックスにフォーカスを当てたい場合などがあります。
以下のように、ref属性を指定すると、JavaScriptのgetElementByIdで取得したときのように、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>