vue.js v-for on two table rows
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>
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>
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>