Question

在页面上，我有一个Vuetify v-form / v-text-field。用户可以在此表单中键入查询，然后按Enter更新页面。

有时查询是错误的，弹出v-dialog模式来解释错误。这是一个复杂的错误，不能只包含在rules的{{1}}属性中。

问题：当模态被解除时，v-text-field不再聚焦，需要点击才能再次使用。这会中断用户，需要从键盘切换到鼠标并返回。

重新关注触发模态的输入的Vue最佳做法是什么？

我可以想到一个没有感觉到Vue-ish的想法：在v-text-field上添加ref并观看v-text-field数据属性。如果dialog变为dialog，请致电false。然而，这似乎是老式的，迫切的（非反应性）方式。例如：

this.$refs.input.focus()

<template>  
  <v-form v-model='valid' @submit.prevent='submit'>
    <v-text-field
      placeholder="Search..."
      v-model="query"
      :rules="[foo]"
      ref='input'
      autofocus
    ></v-text-field>

    <v-dialog
      v-model="dialog"
      @keydown.esc='dialog = false'
    >
      {{ someErrorMessage }}
    </v-dialog>
  </v-form>
</template>

Answer 1

在dialog元素中，我可能会调用一个方法而不是直接将dialog更改为false。然后在该方法中，我将使用一些普通的旧javascript将焦点添加到textarea。

模态解除后Vue / vuetify焦点输入

1 个答案: