Vue：ボタンをクリックしたときに.focus（）を呼び出す方法

Question

昨日はvue.jsでコーディングを開始しましたが、従来のJS方法（document.getElementById('myTextBox').focus()）を使用せずにテキストボックスに「フォーカスする」方法はわかりません。

最初は、自分のテキストボックスは表示されません。私は「スタート」ボタンを持っています。ユーザーがそれをクリックすると、テキストボックスが表示され、話すようにfocusを設定します。私はすでにrefを使ってみましたが、役に立たなかった（下記のコードを参照）。

HTML：

<input id="typeBox" ref="typeBox" placeholder="Type here..." /> 

Javascriptを

export default { 
    name: 'game', 

    methods: { 
    startTimer() { 
     setTimeout(function() { /* .focus() won't work without this */ 

     /* ugly and not recommended */ 
     // document.getElementById('typeBox').focus() 

     /* Throws the error: Cannot read property 'typeBox' of undefined */ 
     this.$refs.typeBox.focus() 

     // ... any other options? 
      // ... 

     }, 1) 
    } 
    } /* END methods */ 

} /* END export default */ 

誰もがこれを行う方法を知っていますか？助けてください。

UPDATE：

がinput上autofocusは、ページがロードされた直後にフォーカスするトリックを行います追加。しかし、私のアプリでは、ページをリロードせずに入力フィールドに何度もフォーカスを合わせる必要があるので、.focus()に電話する方法が必要です。

Answer 1

...

を

私はシニアプログラマの助けを借りてこれを最終的に考え出しました。私はまた、そのvueバージョンnextTick()を使って、途中でsetTimeoutを取り除くことができました。

正しいJSコード：

startTimer() { 
    this.$nextTick(() => { 

     // this won't work because `this.$refs.typeBox` returns an array 
     // this.$refs.typeBox.focus() 

     //this one works perfectly 
     this.$refs.typeBox[0].focus() 

    }) 
} /* END startTimer */ 

説明：

理由コードのためです：私はconsole.log(this.$refs.typeBox)を使用する場合、それはこの配列を返さ

仕事をするには、それがなければならなかったtypeBox.focus()の代わりにtypeBox[0].focus()

Answer 2

setTimeout関数でthisの値は、それが時間の経過後に実行されるコールバック関数であるのでwindowオブジェクトに設定され、それが動的に関数が呼び出されている場所から設定されているthisキーワードの有効範囲を失いました。

矢印機能は、独自の値thisをバインドしません。

startTimer() { 
    setTimeout(() => { 
    this.$refs.typeBox.focus() 
    }, 1) 
} 

OR

startTimer() { 
    const self = this; 
    setTimeout(function() { 
    self.$refs.typeBox.focus() 
    }, 1) 
} 

Answer 3

この参照：誰かが同じ問題に遭遇しただけの場合には、ここで解決策を共有

$(function(){ 
 
    $("#my_text").hide(); 
 
}) 
 

 
function onClickTest(){ 
 
    $("#my_text").show(); 
 
    document.getElementById("my_text").focus(); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="my_text"/> 
 

 
    <button onclick="onClickTest()">click</button>