消除模态后的Vue / Vuetify焦点输入

Question

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

有时查询是错误的，并且会弹出v-dialog模式来解释错误。 这是一个复杂的错误，不能仅仅包装在v-text-field的rules属性中。

问题是：关闭模态后， v-text-field将不再聚焦，需要单击才能再次使用。 这打断了用户，并要求从键盘切换到鼠标再返回。

重新聚焦于触发模式的输入的Vue最佳实践是什么？

我可以想到一个感觉不像Vue的想法：在v-text-field上放置一个ref并查看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>

// Vue instance
  export default { 

    data: function() {
      return {
        dialog: false,
        query: "",
        valid: false
      }
    },

    ...

    watch: {
      // Focus on query after dismissing an error
      dialog(newState) {
        if (!newState) {
          this.$refs.input.focus();
        }
      }
    },

    methods: {
      foo(value) {
        // ... validate value
      },
      submit(e) {
        if (!this.valid) {
          this.dialog = true;
          return;
        }
      }
    }
  }

Answer 1

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