Here is the data I received from an API:
{
"data": {
"City": {
"zip": "75000",
"appointment": {
"2020-10-12": {
"08:00:00": 3,
"09:15:00": 3,
"10:30:00": 3,
"11:45:00": 3,
"13:00:00": 3,
"14:15:00": 3,
"15:30:00": 3
},
}
}
}
}
This information comes directly from the database. But, appointments that have already passed are automatically removed. For instance, if it's currently 1pm, any appointments prior to that time will not be displayed. To address this, I need a method for conditionally rendering appointments only if time >= the specified dates.
Below is the template in use:
<template v-for="(arrAppointmentData, strDate) in arrData['appointment']">
<td :key="strDate" class="text-center ma-5 pa-5">
<template v-if="typeof(arrAppointmentData) == 'object' && strDate > arrAvailableDates ">
<span class="time-slot-x-small" v-for='(intCount, intIndex) in arrAppointmentData' :key="intIndex" v-if="intCount !== 0">
{{ $moment(intIndex, ["HH:mm:ss"]).format('hh:mma')}} <v-badge inline color="green" v-bind:content="intCount" > </v-badge>
</span>
</template>
<template v-else>
None
</template>
</td>
</template>
In my axios call:
this.arrAvailableDates = objResponse.data.dates;
this.arrAppointmentsData = objResponse.data.data;