最近写一个 vue 的写法：
<template v-for="n in 10">
<td>{{ 2 * n }} </td>
<td>{{ 2 * n + 1 }} </td>
</template>
eslint 提示错误：
error Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-key
error Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-key
给元素加上key：
<template v-for="n in 10">
<td :key="2*n" >{{ 2 * n }} </td>
<td :key="2*n+1" >{{ 2 * n + 1 }} </td>
</template>
eslint 提示错误：
VueCompilerError: <template v-for> key should be placed on the <template> tag.
给template加上key：
<template v-for="n in 10 " :key="n" >
<td >{{ 2 * n }} </td>
<td >{{ 2 * n + 1 }} </td>
</template>
eslint 提示错误：
error '<template v-for>' cannot be keyed. Place the key on real elements instead vue/no-v-for-template-key
所以怎么折腾都会有错。查了一下，对于这种 v-for template ， vue2 和 vue3 有不同的处理要求：
- Vue2 要求对实际节点也就是 template 内部节点设置 key。
- Vue3 要求直接对 template 设置 key。
显然 eslint 同时检查了这两种要求，所以不管怎么着都会出错。
如果是 Vue3 项目，可强行忽略 v-for-template-key 检查：
{
"name": "my-vue2-app",
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {
"no-unused-vars": ["error", {
"varsIgnorePattern": "^_",
"argsIgnorePattern": "^_" }],
"vue/no-v-for-template-key": ["off"]
},
"globals": {
"$": true
}
}
}
Q. E. D.
