使用vue.js在一个v-for中重复2个元素

Question

有没有一种方法可以重复2个元素，而一个元素v-for没有多余的元素/容器？

我想要实现的是这样的：

table{
  border-collapse: collapse;
}

td{
  border: 1px solid #999;
}

<table>
  <tr><td rowspan="2">itteration 1</td><td>value 1</td></tr>
  <tr><td>value 2</td></tr>
  <tr><td rowspan="2">itteration 2</td><td>value 1</td></tr>
  <tr><td>value 2</td></tr>
  <tr><td rowspan="2">itteration 3</td><td>value 1</td></tr>
  <tr><td>value 2</td></tr>
  <tr><td rowspan="2">and so on</td><td>value 1</td></tr>
  <tr><td>value 2</td></tr>
</table>

如果我使用如下代码

<tr v-for="(i, k) in items" :key="k">
  <td rowspan="2">itteration {{ k + 1 }}</td>
  <td>value 1</td>
</tr>
<tr v-for="(i, k) in items" :key="k">
  <td>value 2</td>
</tr>

我得到这样的结果

<tr v-for="(i, k) in items" :key="k">
  <td rowspan="2">itteration {{ k + 1 }}</td>
  <td>value 1</td>
</tr>
<tr v-for="(i, k) in items" :key="k">
  <td>value 2</td>
</tr>

table{
  border-collapse: collapse;
}

td{
  border: 1px solid #999;
}

当然我可以使用这样的代码

<tbody v-for="(i, k) in items" :key="k">
  <tr>
    <td rowspan="2">itteration {{ k + 1 }}</td>
    <td>value 1</td>
  </tr>
  <tr>
    <td>value 2</td>
  </tr>
</tbody>

但我想尽可能避免这种情况。

有任何想法吗？

Answer 1

您可以将<template>元素与一起使用v-for，其中可以包含多个子元素：

new Vue({
  el: '#root',
  data() {
    return {
      items: ["foo", "bar", "baz"]
    }
  }
});

table {
  border-collapse: collapse;
}

td {
  border: 1px solid #999;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>

<div id="root">
  <table>
    <template v-for="(i, k) in items">
      <tr>
        <td rowspan="2">iteration {{ k + 1 }}</td>
        <td>value 1</td>
      </tr>
      <tr>
        <td>value 2</td>
      </tr>
    </template>
  </table>
</div>