Question

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

这就是我想要做的：

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

在谷歌搜索时，我发现它是某个版本的bug，但他们有临时解决方案，我也尝试过：

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

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

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

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

Answer 1

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

因此对话框中具有自动聚焦功能的工作v-tex字段看起来像这样：

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

Answer 2

在您的沙箱中（但似乎也是您的问题），您的代码有错误，您从提供的解决方法中删除了return：

watch: {
  dialog (val) {
    if (!val) return; // you removed `return` here
    requestAnimationFrame(() => {
      return this.$refs.focus.focus();
    }
  });

实际上it works

Vuetify的自动对焦功能仅适用于第一个模式开启

2 个答案: