如何在Vuetify对话框打开时通过Vue Refs聚焦自定义文本框？

这问题我之前开发Vuetify项目时也踩过坑！你当前代码的核心问题是：对话框的DOM渲染是异步的——当你在openDialog()里把dialog设为true后，Vue并不会立刻完成对话框和文本框的DOM渲染，而是要等到下一个事件循环才会更新DOM。这时候你同步调用setFocusName()，文本框的DOM元素还没准备好，this.$refs.name可能还未指向真实的input元素，所以focus()调用自然无效。

下面给你几种可行的解决方案：

方案1：用$nextTick延迟聚焦调用 #

$nextTick是Vue提供的方法，它会在DOM更新完成后执行回调函数，刚好能解决异步渲染的问题。修改你的openDialog方法即可：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      dialog: false
    }
  },
  methods: {
    setFocusName() {
      // 用可选链操作符避免refs不存在时报错
      this.$refs.name?.focus();
    },
    openDialog() {
      this.dialog = !this.dialog;
      // 等待DOM更新完成后再执行聚焦
      this.$nextTick(() => {
        this.setFocusName();
      });
    }
  }
});

方案2：监听dialog状态变化 #

通过Vue的watch监听dialog的状态，当它从false变为true时，再执行聚焦操作（同样需要配合$nextTick）：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      dialog: false
    }
  },
  watch: {
    dialog(newStatus) {
      // 只有对话框打开时才执行聚焦
      if (newStatus) {
        this.$nextTick(() => {
          this.$refs.name?.focus();
        });
      }
    }
  },
  methods: {
    openDialog() {
      this.dialog = !this.dialog;
    }
  }
});

方案3：利用Vuetify对话框的事件 #

Vuetify的v-dialog组件提供了@update:model-value事件（也可以用简写@input），当对话框的显示状态变化时会触发这个事件，我们可以在事件回调里处理聚焦：

首先修改模板里的v-dialog：

<v-dialog v-model="dialog" @update:model-value="handleDialogToggle">

然后更新JavaScript部分：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      dialog: false
    }
  },
  methods: {
    handleDialogToggle(isOpen) {
      if (isOpen) {
        this.$nextTick(() => {
          this.$refs.name?.focus();
        });
      }
    },
    openDialog() {
      this.dialog = !this.dialog;
    }
  }
});

额外提示 #

• 确保ref="name"的v-text-field没有被v-if等条件渲染指令包裹（如果有，要确保对话框打开时该文本框确实会被渲染），否则this.$refs.name可能始终为undefined。
• 使用可选链操作符?.可以避免在refs不存在时抛出错误，让代码更健壮。

内容的提问来源于stack exchange，提问作者Andreas Hunter