【前端】vue中input如何自动获取焦点？

• Z时代
• 2024-01-10
• 分类：技术分享

开始界面如下：

当我点击时，变成：

我的问题：
当切换到input时没办法获取焦点

我的代码：

<div class="surface" @click="active_search = false" v-if="active_search">
<div class="color">
<van-icon name="search"/>
<p>搜索调查模板</p>
</div>
</div>
<div class="real" @click="active_search = true" v-else>
<van-icon name="search"/>
<input
v-model="val"
type="text"
placeholder="搜索调查模板"
@change="changeInput()"
ref="myInput"
autofocus>
</div>
---------
data() {
return{
active_search:true,
val:"",
}
},
watch:{
//每次变化，input获取焦点
active_search:function(a,b){
if(b == true){
this.$refs.myInput.focus();
}
}
},

回答

watch: {
    // 每次变化，input获取焦点
    active_search: function(a, b) {
      if (b == true) {
        this.$nextTick(function() {
          this.$refs.myInput.focus()
        })
      }
    }
  },

watch 改成这样，原因是使用v-if,input刚生成，直接通过$refs去取，拿不到。

autofocus="autofocus"

以上是 【前端】vue中input如何自动获取焦点？ 的全部内容， 来源链接： utcz.com/a/81141.html