Vue+v-for+TypeScript中为ref绑定元素设置focus的问题

核心问题分析 #

你遇到的焦点无效和 TypeScript 报错，本质是两个问题：

1. Vue 的 DOM 更新是异步的，直接调用 focus 时输入框还未渲染完成
2. 未正确定义 ref 的类型，导致 TypeScript 无法识别元素类型

完全不需要用 document.getElementById，Vue 提供的 ref 绑定结合异步更新处理就能完美解决，且更符合组件化开发逻辑。

完整实现代码 #

模板部分

<template>
  <div v-for="tag in tags" :key="tag.id" class="tag-item">
    <!-- 编辑按钮 -->
    <button 
      v-show="tagIdBeingEdited !== tag.id"
      @click="toggleTagInput(tag.id)"
    >
      编辑 {{ tag.name }}
    </button>

    <!-- 可编辑输入框 -->
    <input
      v-show="tagIdBeingEdited === tag.id"
      :ref="el => el && (inputs[tag.id] = el)"
      :value="tag.name"
      @blur="toggleTagInput(null)"
      class="tag-input"
    />
  </div>
</template>

脚本部分

<script setup lang="ts">
import { ref, nextTick } from 'vue'

// 定义标签类型
interface Tag {
  id: string
  name: string
}

// 模拟标签数据
const tags = ref<Tag[]>([
  { id: 'tag-1', name: '前端开发' },
  { id: 'tag-2', name: 'TypeScript' },
  { id: 'tag-3', name: 'Vue 3' }
])

// 当前处于编辑状态的标签ID
const tagIdBeingEdited = ref<string | null>(null)

// 存储每个标签对应的输入框元素，明确类型解决TS报错
const inputs = ref<Record<string, HTMLInputElement | null>>({})

const toggleTagInput = async (targetTagId: string | null) => {
  tagIdBeingEdited.value = targetTagId
  
  // 切换到编辑状态时，等待DOM更新完成再聚焦
  if (targetTagId) {
    await nextTick()
    inputs.value[targetTagId]?.focus()
  }
}
</script>

关键细节说明 #

1. 正确绑定 ref
   用对象存储每个标签对应的输入框元素（inputs[tag.id] = el），避免 v-for 中使用数组 ref 可能出现的顺序混乱问题（比如标签排序后，ref 数组与标签数组顺序不匹配）。

2. 异步更新处理
   调用 nextTick() 等待 Vue 完成 DOM 更新，确保输入框已经渲染到页面后再调用 focus，这是焦点无效的核心解决点。

3. TypeScript 类型定义
   通过 Record<string, HTMLInputElement | null> 明确 inputs 的类型，解决「Property 'focus' does not exist on type 'never'」的报错，同时利用可选链操作符（?.）避免空值调用。

为什么不推荐用 document.getElementById？ #

不是不能用，但存在以下问题：

• 需要手动拼接唯一 ID（比如 id="tag-input-{{tag.id}}"），代码冗余且容易出错
• 直接操作 DOM 违背 Vue 的响应式组件化思想，不利于后续维护
• 在组件嵌套或复用场景下，可能出现 ID 冲突问题

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