vue.js - 自定义指令 v-focus 不适用于 vuetify 组件

Question

我正在尝试使用名为 focus 的 vuejs 自定义指令关注来自 vuetify 的组件，即v-field-text.

directives: {
    focus: {
      // directive definition
      inserted: function(el) {
        el.focus();
      }
    }
  }

我有一个待办事项列表，我的待办事项打印有v-for，我还有一个编辑待办事项的选项，每当我点击编辑按钮 todo 消失和 todo 编辑输入出现时。
我正在使用这个焦点指令来自动聚焦输入。

但是，当我像这样使用它时不起作用：

<v-field-text v-focus></v-field-text>

但它是这样工作的：

<input v-focus />

当我console.log来自el指令时，我看到它指的div是由 vuetify 创建的元素。如何解决这个问题？

标签： vue.jsvuetify.js

Answer 1

请尝试此解决方案。它对我有用：

 directives: {
        focus: {
          // directive definition
      inserted: function (el) {
          let childData = el.querySelectorAll("input")[0]; 
          childData.focus()
        }
          }
        }