Vue ＜template v-for＞ key should be placed on the ＜template＞ tag.

报错原因：

在使用 Vue 2 开发项目时，如果在 <template> 标签上使用 v-for 并添加 key 属性，可能会遇到如下错误提示：

<template v-for> key should be placed on the <template> tag.

这个错误通常出现在使用如 VsCode 或 WebStorm 等工具进行开发时，这些工具根据 Vue 3 的规则对 Vue 2 项目进行校验，导致报错。但实际上，‌Vue 2 中 key 应该放在 <template> 的子元素上 ‌，而不是 <template> 标签本身。

解决方案如下：

方法一：将 key 放在子元素上（推荐）

如果你的 <template> 中包含多个元素，应将 key 放在这些子元素上，例如：

<template v-for="item in list" :key="item.id">
  <div>{{ item.name }}</div>
  <span>{{ item.value }}</span>
</template>

方法二：将 <template> 替换为 <div> 并添加 key

如果不想改动结构，也可以将 <template> 替换为 <div>，并添加 key：

<div v-for="item in list" :key="item.id">
  <div>{{ item.name }}</div>
  <span>{{ item.value }}</span>
</div>

方法三：使用 v-if="true" 绕过 ESLint 检查

在 Vue 2 中，可以为 key 所在的组件或标签添加 v-if="true"，来规避 ESLint 的检测：

<template v-for="item in list" :key="item.id" v-if="true">
  <div>{{ item.name }}</div>
</template>

方法四：配置 ESLint 忽略该规则（适用于项目全局）

在项目根目录添加或修改 .eslintrc.js 或 jsconfig.json 文件，以忽略该规则：

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
  ]
}

总结

• Vue 2 中，key 应该放在 <template> 的子元素上；
• 若使用 Vue 3 规则校验工具（如 Volar），需注意区分 Vue 2 和 Vue 3 的语法差异；
• 可通过替换标签、添加 v-if、修改 ESLint 配置等方式解决该问题。