In order to display lists within items in another list, such as a list of chapters with their titles, I am trying to achieve this using q-tables instead of q-list.
Although it is usually straightforward with q-list, I am facing some challenges while working with q-tables.
I attempted the solution below but encountered difficulties with v-for:
<div id="q-app">
<div class="q-pa-md">
<q-table
:data="data"
:columns="columns"
row-key="name"
>
<template v-slot:body="props">
<q-tr :props="props">
<q-td auto-width>
<q-btn size="sm" color="accent" round dense @click="props.expand = !props.expand" :icon="props.expand ? 'remove' : 'add'" />
</q-td>
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
>
{{ col.value }}
</q-td>
</q-tr>
<q-tr
:props="props"
v-show="props.expand"
v-for="item in data"
>
<q-table
hide-header
hide-bottom
:data="item.childs"
:columns="columnsChilds"
style="background:yellow">
</q-table>
</q-tr>
</template>
</q-table>
</div>
</div>
CODE PEN https://codepen.io/ijose/pen/eYzawpx
Thank you.
EDITED: The client-side data structure is as follows:
data:[
0:{
name:'yogurt',
childs:[
0:{name:'one},
1:{name:'two}
]
},
1:{
name:'yogurt two',
childs:[
0:{name:'three},
1:{name:'four}
]
},
]