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

Question

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

通常在 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 。

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

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