[英]VueJs special rending from api json return
我有以下 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
},
}
}
}
}
这是从数据库中提取的。 但是,数据库会根据过去的时间清除约会。 例如,如果当前是下午 1 点,则在此之前的所有约会都会被清除。 如果time
> = 不渲染它的日期,我需要找到一种方法来有条件地渲染。
这是我的模板:
<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>
我的 axios:
this.arrAvailableDates = objResponse.data.dates;
this.arrAppointmentsData = objResponse.data.data;
您可以使用Date.parse()
从appointment
对象中解析日期和时间,可以使用Object.entries()
和Object.keys()
进行迭代,如下所示:
function availableAppointments(appts, expiry) {
return Object.entries(appts)
.reduce((prev, [date, times]) => {
if (times) {
times = Object.keys(times)
.filter((time) => Date.parse(`${date}T${time}`) >= expiry)
.reduce((p, c) => {
p[c] = times[c]
return p
}, {})
}
prev[date] = times
return prev
}, {})
}
用法是这样的:
const appts = availableAppointments(sampleData.data.City.appointment, Date.now())
// => {
// "2020-10-12": {},
// "2020-10-14": {
// "14:15:00": 3,
// "15:30:00": 3
// },
// "2020-10-22": {
// "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
// }
// }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.