vue.js v-for on two table rows - vue.js

Question

Vue 2, no webpack. I want to render two trs at a time, for main and detail expandable row. This is what I'm trying to achieve:
<table>
<tbody>
<div v-for="item in items">
<tr></tr>
<tr class="detail-row"></tr>
</div>
</tbody>
</table>
The problem is that <div> is an invalid child of tbody. How to render two <tr>s at each for loop iteration?

Answer 1

This is the way you solve it in browsers that support template.
<table>
<tbody>
<template v-for="item in items">
<tr></tr>
<tr class="detail-row"></tr>
</template>
</tbody>
</table>
If you need to support browsers that do not support template, I typically resort to a render function.
Here is a working example of both.
console.clear()
new Vue({
el: "#app",
data: {
items: [{
master: "Master",
detail: "Detail"
},
{
master: "Master",
detail: "Detail"
},
]
}
})
new Vue({
el: "#app2",
data: {
items: [{
master: "Master",
detail: "Detail"
},
{
master: "Master",
detail: "Detail"
},
]
},
render(h){
// build the rows
let rows = []
for (let item of this.items){
rows.push(h("tr", [h("td", [item.master])]))
rows.push(h("tr", {class: "detail-row"}, [h("td", [item.detail])]))
}
// add rows to body
let body = h("tbody", rows)
// return the table
return h("table", [body])
}
})
.detail-row{
background-color: lightgray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<h2>Using template</h2>
<div id="app">
<table>
<tbody>
<template v-for="item in items">
<tr><td>{{item.master}}</td></tr>
<tr class="detail-row"><td>{{item.detail}}</td></tr>
</template>
</tbody>
</table>
</div>
<h2>Using render function</h2>
<div id="app2"></div>

Answer 2

In newer version of VueJS, it wants an index. So the solution would look like
<table>
<tbody>
<template v-for="(item, index) in items">
<tr :key="index">
<td>{{item.master}}</td>
</tr>
<tr :key="index" class="detail-row">
<td>{{item.detail}}</td>
</tr>
</template>
</tbody>
</table>

Answer 3

If you want to use in double tag.
Or want to use a separate component in the template div within the table tr tags (as in a new component) you could use style="display: contents" in the first div to keep the table rows inline with each other.
Vue component
<table>
<template v-for="v-for="(price, index) in prices">
<div :key="price.id" style="display: contents">
<tr><td>{{price.id}}</td><td>{{price.name}}</td></tr>
<tr col-span="2">{{price.desc}}</tr>
</div>
</template>
</table>
Or if you want to use a separate component for the rows
Table.vue
<template>
<div>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
</thead>
<tbody>
<template v-for="item in items">
<my-component :item=“item”/>
</template>
</tbody>
</table>
</div>
</template>
my-component.vue
<template>
<div style="display: contents">
<tr>
<td>{{item.firstname}}</td>
<td>{{item.lastname}}</td>
</tr>
<tr>
<td colspan="2" >
{{item.description}}
</td>
</tr>
</div>
</template>

Answer 4

Instead of using display: content in the div and you want the rows linked together you can use display: table-row-group type
<table>
<div v-for="v-for="(price, index) in prices"
v-bind:key="price.id"
style="display: table-row-group">
<tr>
<td>{{price.id}}</td><td>{{price.name}}</td>
</tr>
<tr col-span="2">
{{price.desc}}
</tr>
</div>
</table>