vue中input框自动聚焦问题

问题：

点击“搜索”之后显示input框，此时要求自动聚焦效果。尝试如下：

1. 在标签上加v-foucs 或者 @autofocus=”autofocus” 不生效；
2. 直接在点击事件中添加focus方法第一次不生效，再次点击搜索按钮才会自动聚焦。

解决：

在vue中，并不是每次数据改变都会触发更新dom，而是将这些操作都缓存在一个队列，在一个事件循环结束之后，刷新队列，统一执行dom更新操作。DOM状态更新后做点什么，需要用到this.$nextTick()。

<input type="search" id="seach_input" autocomplete="off"   v-model="searchVal"  ref="seach_input">

 methods: {
    showsearch () {
      this.beginSearch = true
      // this.$refs.seach_input.focus() 第一次不生效
      this.$nextTick(() => {
        this.$refs.seach_input.focus()
      })
},
}