以编程方式将焦点设置在 Vuetify 中的按钮上答案

【问题标题】：Programmatically set focus on button in Vuetify以编程方式将焦点设置在 Vuetify 中的按钮上
【发布时间】：2019-05-04 23:17:01
【问题描述】：

每次打开 v-dialog 时，我都会尝试将操作按钮集中在它上。我尝试使用自动对焦，但它只能工作一次。

通常在 Vuetify 中，您可以通过添加引用然后调用 focus() 函数来将焦点设置在元素上，如下所示：

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

代码：

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

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

【问题讨论】：

Vuetify's autofocus works only on first modal open的可能重复
@Traxo 该问题涉及 v-text-field，不幸的是，适用于 v-text-field 的代码不适用于 v-btn。这就是我问这个问题的原因之一，因为我在网上找到的一切都与关注 v-text-fields 而不是 v-btns 有关。也许在未来版本的 Vuetify 中会被修复，但目前的解决方法是添加 $el.focus()。
我明白了，但我认为您在此处提供的解决方案也适用于该问题？显然 OP 在那里接受了他自己的答案，并且可能不知道您的（也是我提出的）解决方案。我看到我实际上在那里发表的评论与您在此处提出的解决方案基本相同，所以我认为它应该可以工作。
是的，我同意该问题中接受的答案不是很好。我在进行故障排除时实际上尝试过它，但它对我不起作用。
啊，你是对的，对于按钮我们显然需要添加$el，而对于文本字段则不需要。 codepen.io/anon/pen/pQBzmN 或许你应该让 OP 知道。我不确定其中使用v-if 提出的解决方案是否可以？

【解决方案1】：

要将焦点设置在 v-btn 上，您可以在引用之后添加 $el。例如

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

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

编辑：对于 Vuetify 2.x 试试这个

watch: {
  dialog () {
    if (!this.dialog) return
    requestAnimationFrame(() => {
      this.$refs.refToElement.$el.focus()
    })
  }
},

【讨论】：

【解决方案2】：

对于 Vuetify 2.x 使用 setTimeout:

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

【讨论】：

【解决方案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();

【讨论】：