以编程方式将重点放在Vuetify中的按钮上

Question

我试图每次打开v对话框时都将动作按钮聚焦。我尝试使用自动对焦，但是只能使用一次。

通常在Vuetify中，您可以通过添加引用，然后像下面这样调用focus（）函数来将焦点设置在元素上：

<v-text-field ref="refToElement" />

代码：

this.$nextTick(() => this.$refs.refToElement.focus())

但是对于v-btn来说似乎不起作用。每次显示对话框时，如何使用javascript来聚焦v-btn？

Answer 1

对于Vuetify 2.x，请使用setTimeout：

setTimeout(() => {
  this.$refs.button.$el.focus()
})

Answer 2

要把重点放在v-btn上，可以在参考后面添加 $ el 。例如

this.$nextTick(() => this.$refs.refToElement.$el.focus())

对话框和焦点按钮的完整代码笔：https://codepen.io/cby016/pen/eQXoBo。

Answer 3

如果您要动态创建元素，请确保对所有元素使用静态引用。我无法获得焦点，因为我使用了如下所示的动态引用：

<v-text-field v-for="item in items" :ref="item.id"/>

当你使用静态引用时，Vue 会自动为你建立索引，你可以像这样访问它们：

<v-text-field v-for="item in items" ref="textField"/>

const index = items.length - 1;

this.$refs.textField[index].focus();