Vuetify 的自动对焦仅适用于第一个模态打开

Posted 2023-02-22

【中文标题】Vuetify 的自动对焦仅适用于第一个模态打开

【英文标题】：Vuetify's autofocus works only on first modal open

【发布时间】：2018-12-30 13:27:18

【问题描述】：

我正在尝试使用 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)

【问题讨论】：

你试过this.$nextTick($refs.focus.focus)吗？另外，如果你有时间，你可以在 codepen 中重新创建问题。

@Traxo 刚试过，效果一样。我很快就会创建示例。

相关：***.com/questions/48195763/…

@Traxo this 是我做的沙盒

【参考方案1】：

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

所以对话框中自动对焦的工作 v-tex-field 看起来像这样：

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

【讨论】：

这个在<v-autocomplete /> 上为我工作，谢谢！ (vuetify@1.1.14)

我们最近遇到了这个问题——我们想要使用自动对焦的组件被包裹在另一个自定义组件中，然后被模态框包裹。像<Modal :display="showModal"><Form><v-text-field> 这样的东西，为了让它工作，我们向<Form> 添加了一个“显示”道具，然后在v-text-field 上使用v-if。看起来像这样<Modal :display="showModal"><Form :display="showModal"><v-text-field v-if="display" autofocus>。

Property or method "dialog" is not defined on the instance 当然没有定义。 autofocus 对我不管用。

@Bersan 对话框应该是

的 v-model

在 2021 年似乎不需要 v-if，只需自动对焦即可。

【参考方案2】：

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

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

其实it works