本文介绍了Vue:模板不能键入,但不能用 div 替换模板 - 需要没有包装 div 元素的 v-for,嵌套的 v-for 循环的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有这个 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 循环的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!