vue中input如何自动获取焦点？

Question

开始界面如下：

当我点击时，变成：

我的问题：
当切换到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();
        }
    }
},

Answer 1

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

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

Answer 2

autofocus="autofocus"