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

Question

我在应用程序中将 NuxtJS 与 Vuetify 一起使用。当使用 来显示记录表时v-data-table，如果 item.isActive 为 true，我想显示一个徽章。<template>为此，我在内部循环<tr>。每当我提供<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.This isfaces in VSCode with ESLint

第一个错误

第二个错误

执行：

  <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

提前致谢。

Answer 1

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

在这种情况下没有理由使用标签<template>。将v-for孩子放在里面<template>会给你完全相同的输出。

以下是一些屏幕截图以供澄清：

1. 这里我们有一个错误。

2. v-if例如，在子元素上添加 a可能是使用<template>(v-if不应该在与v-for) 相同的元素上使用的原因。现在错误消失了。

3. 或者我们简单地循环标签内的元素<template>，错误就会消失。

Answer 2

<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>