报错原因：
在使用 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 配置等方式解决该问题。