Vue: template can#39;t be keyed, but can#39;t replace template with div - need the v-for without a wrapper div element, nested v-for loops(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 循环的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:Vue:模板不能键入,但不能用 div 替换模板 - 需要没有包装 div 元素的 v-for,嵌套的 v-for 循环
基础教程推荐
- 在for循环中使用setTimeout 2022-01-01
- 有没有办法使用OpenLayers更改OpenStreetMap中某些要素 2022-09-06
- 当用户滚动离开时如何暂停 youtube 嵌入 2022-01-01
- 角度Apollo设置WatchQuery结果为可用变量 2022-01-01
- 我什么时候应该在导入时使用方括号 2022-01-01
- 在 JS 中获取客户端时区(不是 GMT 偏移量) 2022-01-01
- 悬停时滑动输入并停留几秒钟 2022-01-01
- 动态更新多个选择框 2022-01-01
- Karma-Jasmine:如何正确监视 Modal? 2022-01-01
- 响应更改 div 大小保持纵横比 2022-01-01