repeat 2 elements in one v-for with vue.js

Question

is there a way to repeat 2 elements with one v-for without extra element/container?

what I want to achieve is like this:

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>

if I use code like below

<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>

I got a result like this

table{
  border-collapse: collapse;
}

td{
  border: 1px solid #999;
}

<table>
  <tr><td roswpan="2">itteration 1</td><td>value 1</td></tr>
  <tr><td roswpan="2">itteration 2</td><td>value 1</td></tr>
  <tr><td roswpan="2">itteration 3</td><td>value 1</td></tr>
  <tr><td>value2</td></tr>
  <tr><td>value2</td></tr>
  <tr><td>value2</td></tr>
</table>

of-course I could use code like this

<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>

but I want to avoid that if possible.

any ideas?

Answer 1

In Vue 3, it is now possible for a component to have multiple root nodes, so you can use something like this:

const Example = {
  props: ["iteration"],
  template: `
    <tr>
      <td rowspan="2">iteration {{ iteration }}</td>
      <td>value 1</td>
    </tr>
    <tr>
      <td>value 2</td>
    </tr>
  `
};

const App = {
  components: {
    Example
  },
  data() {
    return {
      items: ["foo", "bar", "baz"]
    }
  },
  template: `<Example v-for="(i, k) in items" v-bind:iteration="k" />`
};

Vue.createApp(App).mount("#app");

table {
  border-collapse: collapse;
}

td {
  border: 1px solid #999;
}

<script src="https://unpkg.com/[email protected]/dist/vue.global.prod.js"></script>

<div id="app"></div>

In Vue 2 (tested on 2.5.13), you can use a <template> element with v-for, which can contain more than one child:

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>