Vue中模态框显示时自动聚焦内部输入框的实现问题

你遇到的问题核心是Vue DOM更新的异步特性：设置groupHandler.addNewgroupModal = true后，Vue不会立即渲染模态框和输入框，此时调用focus()时输入框还未挂载到DOM中，因此没有效果。以下是几种可行的解决方法：

方法一：用nextTick延迟执行聚焦逻辑 #

nextTick会等待Vue完成DOM更新后再执行回调，确保输入框已经存在于DOM结构中。

修改按钮点击事件代码：

<div 
    class="manu-bar-card"
    @click="
       () => {
         groupHandler.addNewgroupModal = true;
         nextTick(() => {
           newGroupName.value?.focus();
         });
       }"
 >

同时需要在脚本中引入nextTick：

import { ref, reactive, nextTick } from 'vue';

方法二：监听模态框状态变化 #

如果模态框的显示状态可能被多个操作触发，使用watch监听状态变化会更灵活：

import { ref, reactive, watch, nextTick } from 'vue';

const newGroupName = ref();
const groupHandler = reactive({
  addNewgroupModal: false,
});

watch(() => groupHandler.addNewgroupModal, (isVisible) => {
  if (isVisible) {
    nextTick(() => {
      newGroupName.value?.focus();
    });
  }
});

此时按钮点击事件只需设置状态即可：

<div 
    class="manu-bar-card"
    @click="groupHandler.addNewgroupModal = true"
 >

方法三：自定义v-focus指令（推荐复用） #

创建自定义指令让元素挂载时自动获取焦点，模态框显示时输入框完成挂载后会自动触发聚焦，无需手动调用逻辑：

组件内局部注册指令 #

import { ref, reactive, Directive } from 'vue';

// 定义局部指令
const vFocus: Directive = {
  mounted(el) {
    el.focus();
  }
};

const newGroupName = ref();
const groupHandler = reactive({
  addNewgroupModal: false,
});

模板中给输入框添加指令：

<div class="modal-container" v-if="groupHandler.addNewgroupModal">
 <input
        ref="newGroupName"
        type="text"
        v-focus
    />
</div>

全局注册指令（项目内通用） #

在项目入口文件（如main.ts）中注册：

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.directive('focus', {
  mounted(el) {
    el.focus();
  }
});
app.mount('#app');

注册后所有组件的输入框都可直接使用v-focus指令实现自动聚焦。

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