vue自定義指令v-focus失效之解決辦法！

注冊組件代碼如下：

 

// 設置自定義指令v-focus
  directives: {
    // focus指令名稱
    focus: {
      inserted(el) {
        el.focus()
      },
    },
  },

 

以上我是按照之前教學視頻進行注冊的自定義指令，但是失效。

運行之后可以試着打印下el，看下值是什么：

截圖：

 

通過截圖可以看到返回的值是div，我們所以el並不是input而是他的父標簽div。所以我們只需用querySelector獲取到input再綁定即可。

代碼：

// 設置局部指令v-focus
  directives: {
    // focus指令名稱
    focus: {
      inserted(el) {
        el.querySelector('input').focus()
      },
    },
  },