消除模态后的Vue/Vuetify焦点输入 [英] Vue / vuetify focus input after modal is dismissed

问题描述

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

On a page I have a Vuetify v-form/v-text-field. Users can type a query in to this form and press Enter to update the page.

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

Sometimes the query is erroneous and a v-dialog modal pops up to explain the error. It's a complex error and can't just be packed in the rules attribute of the v-text-field.

问题:关闭模态后， v-text-field 不再集中，需要单击才能再次使用.这会打扰用户，并且需要从键盘切换到鼠标再返回.

The problem: when the modal is dismissed, the v-text-field is no longer focused and requires a click before it can be used again. This interrupts the user and requires a shift from keyboard to mouse and back.

重新聚焦于触发模式的输入的Vue最佳做法是什么?

我可以想到一个感觉不像Vue的想法:在 v-text-field 上放置 ref 并观看 dialog 数据属性.如果 dialog 变为 false ，请调用 this.$ refs.input.focus().但是，这似乎是一种老式的命令式(非反应式)方法.例如:

I can think of one idea it doesn't feel Vue-ish: put a ref on the v-text-field and watch the dialog data property. If dialog becomes false, call this.$refs.input.focus(). However, this seems like the old-fashioned, imperative (not reactive) way to do it. For example:

<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;
        }
      }
    }
  }

推荐答案

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

In the dialog element, I'd probably call a method instead of directly changing dialog to false. Then in that method, I'd add focus to the textarea with some plain old javascript.

这篇关于消除模态后的Vue/Vuetify焦点输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！