需求：點擊button按鈕，錄入成功后，頁面上的input框自動聚焦，快速進行下一次錄入，提高效率

開始嘗試了幾種方法都沒有成功

一、首先想到的用vue指令 v-focus，然而沒有成功

<Input v-model="book.isbnOrIssn" @change.native="_getIsbn" @blur="_getIsbn" :disabled="snDisabled" v-focusplaceholder="請掃描或輸入ISBN/ISSN"></Input> directives: {focus: {inserted (el,{value}) {if(value){el.focus()}}}},

?

二、操作頁面dom節點，首先用到ref，然而還是沒有任何作用

<Input v-model="book.isbnOrIssn" @change.native="_getIsbn" @blur="_getIsbn" :disabled="snDisabled" ref="gain"placeholder="請掃描或輸入ISBN/ISSN"></Input>

this.$refs.gain.focus()

?

最后去網上查找資料，發現是更新dom先后順序的問題，在vue中，并不是每次數據改變都會觸發更新dom，而是將這些操作都緩存在一個隊列，在一個事件循環結束之后，刷新隊列，統一執行dom更新操作。?

通常情況下，我們不需要關心這個問題，而如果想在DOM狀態更新后做點什么，則需要用到nextTick。在vue生命周期的created()鉤子函數進行的DOM操作要放在Vue.nextTick()的回調函數中，因為created()鉤子函數執行的時候DOM并未進行任何渲染，而此時進行DOM操作是徒勞的，所以此處一定要將DOM操作的JS代碼放進Vue.nextTick()的回調函數中。

?

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

?

轉載于:https://www.cnblogs.com/wangdashi/p/9660747.html

總結

以上是生活随笔為你收集整理的vue中，点击button按钮后，页面上的input框再次自动获取焦点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。