vueでbuttonボタンをクリックすると、ページのinputボックスが自動的にフォーカスします

vueでbuttonボタンをクリックすると、ページのinputボックスが自動的にフォーカスします
一、まず思いついたvueでv-focusを指令したが、成功しなかった
v-model=“book.isbnOrIssn” @change.native="_getIsbn"@blur="_getIsbn":disabled="snDisabled"v-focus placeholder="ISBN/ISSNをスキャンまたは入力してください">directives:{focus:{inserted(el,{value}){if(value){el.focus(}}
二、ページdomを操作するには、まずrefを使うが、まだ何の役にも立たない.
v-model=“book.isbnOrIssn” @change.native="_getIsbn"@blur="_getIsbn":disabled="snDisabled"ref="gain"placeholder="ISBN/ISSNをスキャンまたは入力してください">this.$refs.gain.focus()
三、定義idの形式でページdomを操作しても、結果はだめです
document.getElementById(‘gain‘).querySelector(‘input‘).focus()
最後にネット上で資料を探して、domの前後順序を更新する問題であることを発見して、vueの中で、データの変化のたびに更新domをトリガーするのではなくて、これらの操作をすべて1つのキューにキャッシュして、1つのイベントの循環が終わった後に、キューをリフレッシュして、統一的にdomの更新操作を実行します.
通常、この問題に関心を持つ必要はありませんが、DOM状態の更新後に何かをするにはnextTickが必要です.vueライフサイクルのcreated()フック関数で行うDOM操作はVueに置く.nextTick()のコールバック関数では、created()フック関数の実行時にDOMがレンダリングすることがないため、このときにDOM操作を行うのは無駄なので、ここでは必ずDOM操作のJSコードをVueに入れる.nextTick()のコールバック関数にあります.

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

注:ポイントはVueです.nexttick()の使い方