如何摆脱 ESLint 错误 <template v-for> 键应该放在 <template> 标签上？答案

【问题标题】：How to get rid of ESLint error <template v-for> key should be placed on the <template> tag?如何摆脱 ESLint 错误 <template v-for> 键应该放在 <template> 标签上？
【发布时间】：2022-09-27 17:01:15
【问题描述】：

我在应用程序中使用 NuxtJS 和 Vuetify。当显示带有v-data-table 的记录表时，如果 item.isActive 为真，我想显示一个徽章。为此，我在<tr> 中循环遍历<template>。每当我提供<template> 标签的密钥时，我都会得到\'<template v-for>\' cannot be keyed. Place the key on real elements instead。当我尝试键入<td> 时，我得到<template v-for> key should be placed on the <template> tag. 这在带有ESLint 的VSCode 中面临

第一个错误

第二个错误

执行：

  <v-data-table :items=\"items\">
    <template v-slot:item=\"{ item }\">
      <tr>
        <template v-for=\"(header, index) in headers\">
          <td v-if=\"header.value === \'isActive\'\" :key=\"index\">
            <v-badge bordered content=\"\" offset-x=\"-10\" color=\"\'#64b54d\'\" />
          </td>
          <td
            v-else
            :key=\"index\"
          >
            {{ item[header.value] }}
          </td>
        </template>
      </tr>
    </template>
  </v-data-table>

CodeSandbox 链接：https://codesandbox.io/s/runtime-wood-q4mc5h?file=/pages/home.vue:11-585

提前致谢。

我添加了一个答案。你有没有机会调查一下。希望它会按照您的期望工作。
eslint.vuejs.org/rules/no-v-for-template-key-on-child.html 这是您需要禁用的规则，即将 \"vue/no-v-for-template-key-on-child\": \"off\" 放入 package.json 的 eslintconfig>rules 部分。但是，如果您的 VS Code 仍然在抱怨，那将是 VueJS 插件之一的工作 - 您可能需要与作者讨论它
请问你为什么在这里使用template标签？为什么不在你的<tr> 上加上 v-for？
@miro 因为您不能在同一元素上使用 v-for 和 v-if 。

标签： vue.js nuxt.js vuetify.js

【解决方案1】：

<template v-for> 无法键入。而是将键放在真实元素上。

您必须在模板中键入all elements。如果您拥有的不仅仅是<td>，那么这些元素还需要唯一的键。考虑将这些元素移动到组件中。

可能的解决方案：

var vueStore = {
  state: {
            items: [
        {name: 'MacBook Air', price: 1000},
        {name: 'MacBook Pro', price: 1800},
        {name: 'Lenovo W530', price: 1400},
        {name: 'Acer Aspire One', price: 300}
      ]    
  }
}


var vm = new Vue({
  el: '#vue-instance',
  data: {
    vueState: vueStore.state
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="vue-instance">
  <table class="table table-borderd table-striped">
    <tr>
      <template v-for="(item, index) in vueState.items">
        <td align="center" :key="index">{{ item.name }}</td>
      </template>
    </tr>
  </table>
</div>

【讨论】：

谢谢回答。如果你不介意，你可以添加一个例子吗？
添加的代码 sn -p 只是一个示例。您可以根据您的代码/要求使用它。
你好。感谢更新。问题是我正在开发一个带有 vuetify 的 nuxtjs 项目，并且启用了 eslint 默认规则。如果您不介意，您可以尝试通过npx create-nuxt-app <app-name> 命令并选择eslint 进行linting 并在本地检查吗？我会很感激
现在我不能这样做，因为我正在优先处理一些不同的项目。对此感到抱歉。
问题有错误： <template v-for> 键应该放在 <template> 标记上。你的答案和他的问题一样。

【解决方案2】：

密钥不能用于一个循环中的两个节点。你必须做这样的事情

<v-data-table :items="items">
<template v-slot:item="{ item }">
  <tr>
    <template v-for="(header, index) in headers">
      <td key="index">
        <template v-if="header.value === 'isActive'">
          <v-badge bordered content="" offset-x="-10" color="'#64b54d'" />
        </template>

        <template v-else>
          {{ item[header.value] }}
        </template>
      </td>
    </template>
  </tr>
</template>

【讨论】：

【解决方案3】：

我遇到过类似的情况，对我来说，这就是归结为（尽管错误没有具体说明）：

在这种情况下没有理由使用<template> 标签。将v-for 放在<template> 内的孩子身上会得到完全相同的输出。

这里有一些截图可以澄清：

这里有一个错误。
1. 例如，在子元素上添加v-if 可能是使用<template> 的原因（v-if 不应与v-for 用于同一元素上）。现在错误消失了。
1. 或者我们简单地循环<template>标签内的元素，错误就消失了。

【讨论】：