Vue 2 v-for包含多个项目

Question

当尝试使用v-for填充表时，很容易将v-for元素1:1映射为以下行:

<template>
<table>
<tr v-for="item in items"><td>{{item}}</td></tr>
</table>
</template>

我的问题是:我如何创建多行(例如td元素)每项(见下面的伪代码):

<template>
<table>
<nothing v-for="item in items">
<tr><td>{{item.line1}}</td></tr>
<tr><td>{{item.line2}}</td></tr>
</nothing>
</table>
</template>

这里<nothing>不应该作为一个级别在DOM中发出，只能在<table>下直接发出<td>。

这可能吗?

Answer 1

在Vue.js中，您可以使用标记<template>，它确实是您所说的nothing。

<table id="t1">
<template v-for="item in items">
<tr><td>{{item.line1}}</td></tr>
<tr><td>{{item.line2}}</td></tr>
</template>
</table>

但是，你也可以将这两行包装成tbody标签来实际渲染它，并将这两行分组为两行，例如，用于样式。

Answer 2

除了Dmitry的解决方案之外，通常情况下，您还需要循环您的行，并在同一个td中使用块。

<table>
<tr v-for="item in items">
<td>
{{item.line1}} <br />
{{item.line2}}
</td>
</tr>
</table>

或

<table>
<tr v-for="item in items">
<td>
<div>{{item.line1}}</div>
<div>{{item.line2}}</div>
</td>
</tr>
</table>