The results returned by the controller query are as follows:
date: {2020-09-24: {work_hours: 7}, 2020-09-30: {work_hours: 8}}
2020-09-24: {work_hours: 7}
2020-09-30: {work_hours: 8}
Within my Vue component, I am attempting to use nested for loops, but it is resulting in double iterations.
<table class="table table-hover table-bordered table-sm" >
<thead>
<tr>
<template v-for="disp in iDate.slice(1)">
<th scope="col" v-if="toWordDay(disp.date) == 'Sunday'" style="color:red">{{disp.date | forThDate}}</th>
<th scope="col" v-else>{{disp.date | forThDate}}</th>
</template>
</tr>
</thead>
<tbody>
<template v-for="fetch in attendanceData">
<tr>
<template v-for="disp in iDate.slice(1)">
<td style="height:10px;" v-for="(data,ind) in fetch.date" v-if="ind == disp.date" >{{data.work_hours}}</td>
<td style="height:10px;" v-else>0</td>
</template>
</tr>
</template>
</tbody>
</table>