Vue:模板不能键入，但不能用 div 替换模板 - 需要没有包装 div 元素的 v-for，嵌套的 v-for 循环 [英] Vue: template can't be keyed, but can't replace template with div - need the v-for without a wrapper div element, nested v-for loops

问题描述

我有这个 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 代码显示:

that I display with this vue code:

<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>'无法键入.将键放在真实元素上 错误.如果我用 span 或 div 替换 template，它可以工作，但是样式完全不合适，所以我需要它没有包装器元素 - 我已经读过它只能通过 template 标记实现，但是我不确定如何修改 v-for 循环以消除错误.

However I get the error '<template>' cannot be keyed. Place the key on real elements error. If I replace template with span or div, it works, but the styling is all out of place, so I need it to be without the wrapper element - I've read it's only achievable with the template tag, but then I'm not sure how to modify the v-for loops to remove the error.

推荐答案

尝试将v-for直接移动到table中:

Try to move v-for directly into table:

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

这篇关于Vue:模板不能键入，但不能用 div 替换模板 - 需要没有包装 div 元素的 v-for，嵌套的 v-for 循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！