Vue3+TS中如何遍历Record<string, string[]>类型变量？

你遇到的错误核心原因是：第一个v-for循环中直接将数组e作为:key的值，而Vue要求循环的key必须是string | number | symbol | undefined类型，数组不符合该类型约束，因此TypeScript抛出类型不匹配的错误。

正确实现方式（推荐） #

通过v-for同时遍历字典的键（字段名）和值（错误信息数组），用字段名作为外层循环的唯一key，既符合类型要求，也能清晰展示字段与错误的对应关系：

<ul>
  <!-- 同时获取每个字段名（fieldName）和对应的错误数组（errorList） -->
  <li v-for="(errorList, fieldName) in errors" :key="fieldName">
    {{ fieldName }} <!-- 可选：显示字段名，比如 username、password -->
    <ul>
      <!-- 内层遍历错误数组，用索引或错误信息作为key -->
      <li v-for="(errorMsg, index) in errorList" :key="index">
        {{ errorMsg }}
      </li>
    </ul>
  </li>
</ul>

补充说明 #

• 外层循环的:key使用fieldName（字符串类型），完全符合Vue对key的类型要求，不会触发TypeScript报错。
• 内层循环的:key如果错误信息可能重复，推荐使用index（数字类型）确保唯一性；若能保证每条错误信息唯一，也可以直接用errorMsg作为key。

备选方案（无需显示字段名时） #

如果不需要展示字段名，也可以通过Object.values()将Record<string, string[]>转换为字符串数组的数组，再遍历：

<ul>
  <li v-for="(errorList, index) in Object.values(errors)" :key="index">
    <ul>
      <li v-for="(errorMsg, idx) in errorList" :key="idx">
        {{ errorMsg }}
      </li>
    </ul>
  </li>
</ul>

注：此方案外层使用索引作为key，适合不需要字段名的场景，但数组顺序变化时可能存在性能隐患，优先推荐第一种方案。

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