repeat 2 elements in one v-for with vue.js - 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/vue#3.0.0-beta.14/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>