☰

v-show で表示された後に入力にフォーカスを設定する 質問する

tag-icon • tag-icon javascript vue.js vuejs2
v-show で表示された後に入力にフォーカスを設定する 質問する

v-show を使用して、ページが読み込まれると非表示になる単純なフォームがあります。入力を表示した後、入力にフォーカスを当てたいです。次のコードを使用して、フォームを表示し、入力にフォーカスを設定するメソッドを呼び出すボタンがあります。

    this.newQuestion = true; //(Form whit v-show:newQuestion)
    this.$refs.questionInput.focus();

問題は、フォームは正しく表示されるものの、ボタンを最初に押したときには入力がフォーカスされず、フォームがページ内にあるときに 2 回目に押すと機能することです。これを実行する方法があるかどうか知りたいです。よろしくお願いします。

ベストアンサー1

focus以前にも同様の問題に遭遇したことがあり、 Vue のメソッド (データを変更した直後に を使用する) を使用して強制的に更新し、nextTickDOM の更新を待機しました。:

this.$nextTick(() => {
    this.$refs.questionInput.focus();
})

おすすめ記事