技術標籤：筆記vue

問題：

點選“搜尋”之後顯示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()
      })
},
}