Programmatically set focus on button in Vuetify

问题

I am trying to focus the action buttons in a v-dialog every time it is opened. I tried using autofocus however it only works once.

Normally in Vuetify you can set the focus on an element by adding a reference and then calling the focus() function like this:

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

Code:

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

However for v-btn this doesn't seem to work. How can I use javascript to focus the v-btn every time the dialog is shown?

回答1:

To set the focus on a v-btn you can add $el after the reference. For example

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

Full codepen of dialog and focused button: https://codepen.io/cby016/pen/eQXoBo.

来源：https://stackoverflow.com/questions/53597532/programmatically-set-focus-on-button-in-vuetify