Vue中输入框显示时无法自动聚焦的问题求助（附代码示例）

我完全懂你遇到的这个头疼问题——点击编辑按钮后输入框明明显示出来了，却死活没法自动聚焦，查了才发现$refs.name是undefined。这其实是Vue异步DOM更新的特性在搞鬼，给你详细说说怎么解决：

问题根源 #

当你在toggleEdit里把isEditing设为true时，Vue不会立刻把输入框渲染到DOM上。它会把DOM更新的任务放到异步队列里，等当前所有同步代码执行完后才会处理。这时候你马上调用this.$refs.name.focus()，输入框还没被挂载到页面上，ref自然拿不到。哪怕用setTimeout没生效，大概率是因为延迟时间没卡准DOM更新的时机。

方案一：用$nextTick等待DOM更新 #

Vue专门提供了$nextTick方法来处理这种场景——它会在当前一轮DOM更新循环结束后，执行你传入的回调函数。这时候输入框已经实实在在渲染到页面上了，ref引用自然就能正常获取并调用聚焦方法。

修改后的toggleEdit方法如下：

toggleEdit() {
  this.isEditing = !this.isEditing;
  this.$nextTick(() => {
    // 只在进入编辑状态时执行聚焦
    if (this.isEditing) {
      this.$refs.name?.focus();
    }
  });
}

这里加了可选链?.是做一层容错处理，避免极端情况下ref仍不存在导致报错，让代码更健壮。

方案二：利用组件挂载钩子直接触发聚焦 #

还有一种更简洁的思路：给输入框绑定@hook:mounted钩子，让输入框在自己被挂载到DOM的瞬间自动触发聚焦操作，不用在方法里处理异步逻辑：

修改后的模板部分：

<h1 class="text-gray-900 text-2xl font-medium flex items-center">
  <input 
    v-if="isEditing" 
    ref="name" 
    type="text" 
    v-model="role" 
    @keyup.esc="toggleEdit"
    @hook:mounted="() => $refs.name.focus()"
  />
  <span v-else>{{ role }}</span>
  <button @click="toggleEdit">Edit</button>
</h1>

这种方式更贴合Vue的响应式思路，让输入框自己处理挂载后的聚焦逻辑，代码逻辑更清晰。

完整修改后的代码示例 #

<template>
  <h1 class="text-gray-900 text-2xl font-medium flex items-center">
    <input 
      v-if="isEditing" 
      ref="name" 
      type="text" 
      v-model="role" 
      @keyup.esc="toggleEdit"
    />
    <span v-else>{{ role }}</span>
    <button @click="toggleEdit">Edit</button>
  </h1>
</template>

<script>
export default {
  data() {
    return {
      role: 'Admin',
      isEditing: false,
    };
  },
  methods: {
    toggleEdit() {
      this.isEditing = !this.isEditing;
      this.$nextTick(() => {
        if (this.isEditing) {
          this.$refs.name?.focus();
        }
      });
    },
  },
};
</script>

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