最近，碰到一個問題，就是輸入框旁邊有一個編輯按鈕，點選時，才可以對輸入框進行編輯：

要實現的效果：

為了方便輸入，需要自動獲取焦點，所以加入了autofocus，但是發現，只有第一個並且第一次點選才起作用。
查了網上的一些文件，說是跟dom的渲染順序和資料的快取有點兒關係，至於深層次的原因，還沒查到，希望有知道的朋友，不吝告知。
然後使用了Vue提供的自定義指令來解決，還有一點兒需要注意，el-input在頁面渲染後，外層是個div，需要拿到裡面的input才會有效果。

<el-input v-focus></el-input>

directives: {
  // 註冊一個區域性的自定義指令 v-focus
  focus: {
    // 指令的定義
    inserted: function (el) {
      // 聚焦元素
      el.querySelector('input').focus()
    }
  }
},
 

還有一種解決方案，是使用 Vue.nextTick() 和 Ref去做，例子就不去寫了，都是去操作dom的。