I have this 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"
}
}
}
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>
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.
<table class="table-auto" v-for="(obj, pos) in this.breakdown" :key="pos">
suit you?