Vue：模板不能键控，但不能用 div 替换模板 - 需要没有包装 div 元素的 v-for，嵌套 v-for 循环

Question

我有这个 JSON：

{
   "data":{
      "1":{
         "color":"red",
         "size":"big"
      },
      "2":{
         "color":"red",
         "size":"big"
      },
      "3":{
         "color":"red",
         "size":"big"
      },
      "4":{
         "color":"red",
         "size":"big"
      },
      "5":{
         "color":"red",
         "size":"big"
      }
   }
}

我用这个vue代码显示：

<template>
...

<template v-for="(obj, pos) in this.breakdown" :key="pos">
    <table class="table-auto" >
        <thead>
            <tr>
                <th class="px-4 py-2">Property</th>
                <th class="px-4 py-2">Value</th>
            </tr>
        </thead>

        <tbody>
            <template v-for = "(obj2, pos2) in obj" :key="pos2">
                <tr>
                    <td class="border px-4 py-2">
                        {{pos2}}
                    </td>
                    <td class="border px-4 py-2">
                        {{obj2}}
                    </td>
                </tr>
            </template>
        </tbody>
    </table>
</template>
...
</template>

但是我得到了error '<template>' cannot be keyed. Place the key on real elements错误。如果我替换template为spanor div，它可以工作，但是样式完全不合适，所以我需要它没有包装元素 - 我已经读过它只能用template标签实现，但是我不知道如何修改v-for消除错误的循环。

Answer 1

尝试将 v-for 放入模板并在 tr 上键入 key。

<template v-for="(i, j) in list" >   
            <tr :key="'1tr-'+j"> 
               <td..../>
            </tr>
            <tr :key="'2tr-'+j"> 
               <td..../>
            </tr>
 </template>

这对我有用。希望它会

Answer 2

就我而言，我需要渲染侧边栏菜单。菜单项可以是单个元素或子菜单。我试过这个：

\n

export interface DashboardRoute {\n  icon: string\n  label: string\n  children?: string[]\n}\n\nconst dashboardRoutes: DashboardRoute[] = [\n  {\n    label: \'Vis\xc3\xa3o geral\',\n    icon: \'dashboard\',\n  },\n  {\n    label: \'Pessoas\',\n    icon: \'user\',\n  },\n  {\n    label: \'Categorias\',\n    icon: \'tags\',\n    children: [\n      \'Todas as categorias\',\n      \'Alimenta\xc3\xa7\xc3\xa3o\',\n      \'Refei\xc3\xa7\xc3\xa3o\',\n    ],\n  },\n]\n\nexport default dashboardRoutes\n

\n

<a-menu v-for="{ icon, label, children } in dashboardRoutes" :key="label" mode="inline">\n  <a-sub-menu v-if="children">\n    <span slot="title"\n      ><a-icon :type="icon" /><span>{{ label }}</span></span\n    >\n    <a-menu-item v-for="child in children" :key="child">\n      {{ child }}\n    </a-menu-item>\n  </a-sub-menu>\n  <a-menu-item v-else>\n    <a-icon :type="icon" />\n    <span class="nav-text">{{ label }}</span>\n  </a-menu-item>\n</a-menu>\n

\n

但这是不对的。它将创建多个a-menu元素，并且应该只有一个元素。

\n

所以我天真地尝试了这个：

\n

<a-menu mode="inline">\n  <template v-for="{ icon, label, children } in dashboardRoutes" :key="label">\n    <a-sub-menu v-if="children">\n      <span slot="title"\n        ><a-icon :type="icon" /><span>{{ label }}</span></span\n      >\n      <a-menu-item v-for="child in children" :key="child">\n        {{ child }}\n      </a-menu-item>\n    </a-sub-menu>\n    <a-menu-item v-else>\n      <a-icon :type="icon" />\n      <span class="nav-text">{{ label }}</span>\n    </a-menu-item>\n  </template>\n</a-menu>\n

\n

这显示了您发现的这个错误。所以我用谷歌搜索并发现了这个问题。 \n解决方案是将关键道具从模板移动到第一个子元素，或兄弟元素（如果它们存在 - 这就是我的情况）。

\n

所以，解决方案将是

\n

<a-menu mode="inline">\n  <template v-for="{ icon, label, children } in dashboardRoutes">\n    <a-sub-menu v-if="children" :key="label"> <!-- key comes here! -->\n      <span slot="title"\n        ><a-icon :type="icon" /><span>{{ label }}</span></span\n      >\n      <a-menu-item v-for="child in children" :key="child"> \n        {{ child }}\n      </a-menu-item>\n    </a-sub-menu>\n    <a-menu-item v-else :key="label"> <!-- key comes here! -->\n      <a-icon :type="icon" />\n      <span class="nav-text">{{ label }}</span>\n    </a-menu-item>\n  </template>\n</a-menu>\n

\n

Answer 3

尝试将 v-for 直接移至table：

<table class="table-auto" v-for="(obj, pos) in this.breakdown" :key="pos">