Vuetify的自动对焦功能仅适用于第一个模式开启 [英] Vuetify's autofocus works only on first modal open

问题描述

我正在尝试使用Vuetify的 v-text-field autofocus ，但是它只能在第一次使用.关闭对话框后，它将不再起作用.

I am trying to use Vuetify's v-text-field autofocus however it works only first time. After I close the dialog, it doesn't work anymore.

这就是我想要做的:

<v-text-field ref="focus" autofocus></v-text-field>

在进行谷歌搜索时，我发现它是某个版本中已修复的错误但是他们有临时解决方案，我也尝试过:

While googling I found out that it was a bug that was fixed in some version but they had temporary solution which I also tried:

watch: {
     dialog: (val) ->
         if !val
             debugger
             requestAnimationFrame( =>
                @$refs.focus.focus()
             )
}

我做错了什么还是还是一个错误?设置断点我看到它在那点停止.有人可以引导我朝正确的方向前进吗?

Am I doing something wrong or it is still a bug? Setting breakpoint I saw that it stops at that point. Can anybody lead me to the right direction?

我唯一的区别是我正在使用Vuex，而对话框变量在Vuex存储中.对话框是getter/setter.

The only difference I have is that I am using Vuex and the dialog variable is in Vuex store. And the dialog is getter/setter.

dialog:
   get: ->
       return this.$store.state.my_store.isDialogOpen
   set: (value) ->
      this.$store.commit('my_store/MY_MUTATION', value)

推荐答案

对我唯一有用的是 v-if ="dialog" ，因为自动对焦道具仅在初始加载时有效这就是为什么它仅在我第一次打开对话框时可用.

The only thing that worked for me was the v-if="dialog" because the autofocus prop will only work on initial load which is why it was available only for the first time I opened the dialog.

因此对话框中具有自动聚焦功能的v-tex字段将如下所示:

So the working v-tex-field with autofocus in dialog would look something like this:

<v-text-field label="Label" v-if="dialog" autofocus></v-text-field>

这篇关于Vuetify的自动对焦功能仅适用于第一个模式开启的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！