如何在不破坏html代码的情况下在vuejs模板内循环

Question

所以我试图在表中循环。我遇到的一个问题是

<tr v-for="( block , index ) in listRenderBlock" :key="index">
<div v-for="( section , i ) in block.sections" :key=" i ">
<td> 
<p>
{{ block.name }}
</p>
</td>
<td>
<p>
{{ section.name }}
</p>
</td>
</div>
</tr>

因此，如果我尝试这样循环，div将破坏表的代码。我知道，如果有反应，我可以做一些类似的事情

blocks.sections.map(value => ....)

但这似乎也不适用于vuejs。有什么建议吗？感谢所有评论，并感谢阅读

Answer 1

当您想在不使用包装的情况下循环时，请使用<template>:

<tr v-for="( block , index ) in listRenderBlock" :key="index">
<template v-for="(section , i ) in block.sections">
<td :key="`b_${index}_${i}`"> 
<p>
{{ block.name }}
</p>
</td>
<td :key="`s_${index}_${i}`">
<p>
{{ section.name }}
</p>
</td>
</template>
</tr>

注意：<div>是<tr>的无效子级。

看到它工作：

Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
el: '#app',
data: () => ({
listRenderBlock: [{
name: 'B-1',
sections: [
{ name: 'S-1' },
{ name: 'S-2' }
]
}, {
name: 'B-2',
sections: [
{ name: 'S-1' },
{ name: 'S-2' }
]
}]
})
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<table id="app">
<tr v-for="(block, index) in listRenderBlock" :key="index">
<template v-for="(section, i) in block.sections">
<td :key="`b_${index}_${i}`"> 
<p v-text="block.name" />
</td>
<td :key="`s_${index}_${i}`">
<p v-text="section.name" />
</td>
</template>
</tr>
</table>

另一个注意事项：<template>的不能是:key-ed，因为它们最终不是DOM元素。因此，您必须提出自己的:key-ing系统，并将其应用于实际的DOM元素。在您的情况下，我用index+i制作了密钥，前缀为块<td>的b或部分<td>的s。钥匙看起来怎么样并不重要，只要它们是独一无二的。(它们不会显示在任何地方，只是Vue在模型/数据更改时使用它们来更新DOM元素(。