Javascript Vuetify'；s自动对焦仅在第一个模式打开时工作

我正在尝试使用Vuetify的

v-text-field

自动对焦

，但它只在第一次使用时起作用。关闭对话框后，它就不再工作了

这就是我想做的：

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

我是做错了什么，还是它仍然是一个bug？设置断点我看到它在那个点停止。有人能把我引向正确的方向吗

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

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

---

唯一对我有效的是

v-if=“dialog”

，因为自动对焦道具只能在初始加载时工作，这就是为什么它只有在我第一次打开对话框时才可用

因此，对话框中带有自动对焦的工作v-tex-field将如下所示：

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

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

return

：

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

---

那么实际上

你试过这个了吗。$nextTick（$refs.focus.focus）？如果您有时间，也可以在codepen中重新创建问题。@Traxo刚刚尝试过，效果相同。我将很快创建示例。相关：@Traxo是我制作的沙盒这是一个为我工作的沙盒，谢谢！(vuetify@1.1.14)我们最近遇到了一个小小的转折——我们想要使用autofocus的组件被包装在另一个自定义组件中，然后用模态包装。类似于

的东西，为了让它正常工作，我们在

中添加了一个“display”道具，然后在

v-text-field

上使用

v-if

。看起来像这样的

属性或方法“dialog”没有在实例上定义

当然没有定义<代码>自动对焦无论如何对我不起作用。@Bersan dialog应该是2021年的v-model，这里不需要v-if，只需要自动对焦就可以了。

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