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,而是将这些操作都缓存在一个队列,在一个事件循环结束之后,刷新队列,统一执行dom更新操作。

通常情况下,我们不需要关心这个问题,而如果想在DOM状态更新后做点什么,则需要用到nextTick。在vue生命周期的created()钩子函数进行的DOM操作要放在Vue.nextTick()的回调函数中,因为created()钩子函数执行的时候DOM并未进行任何渲染,而此时进行DOM操作是徒劳的,所以此处一定要将DOM操作的JS代码放进Vue.nextTick()的回调函数中。

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

注:重点是Vue.nextTick()的用法


你可能感兴趣的:(踩坑总结)