模式关闭后的Vue / vuetify焦点输入答案

【问题标题】：Vue / vuetify focus input after modal is dismissed模式关闭后的Vue / vuetify焦点输入
【发布时间】：2018-06-20 02:46:39
【问题描述】：

在一个页面上，我有一个 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;
        }
      }
    }
  }

【问题讨论】：

对此没有“最佳实践”。可能只是一个“好的，那行得通”。一个可以玩的例子会很有帮助。
@Bert 也许是这样，但我是 Vue 的新手，并试图更好地理解它。添加了一些示例代码来玩。

标签： vue.js modal-dialog focus vuetify.js

【解决方案1】：

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

【讨论】：