javascript - Vue : template can't be keyed, 但不能用 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与 span或 div ，它可以工作，但样式完全不合适，所以我需要它没有包装元素 - 我已经读过它只能通过 template 实现标签，但是我不确定如何修改 v-for循环以消除错误。

Answer 1

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

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

这对我有用。希望它会