我有以下来 self 的 api 的数据:
[
{
"id": 1,
"start": "2020-12-24 01:00",
"end": "2020-12-24 01:30",
"comments": null,
"createdAt": "2020-12-24T19:37:52.699Z",
"updatedAt": "2020-12-24T19:37:52.699Z",
"clientId": 1,
"employeeId": null,
"serviceId": null,
"appointmentStatusId": null,
"tenantId": 1,
"employee": null,
"client": {
"firstName": "Tamires",
"lastName": "Almeida"
}
},
{
"id": 3,
"start": "2020-12-24 21:15",
"end": "2020-12-24 22:00",
"comments": null,
"createdAt": "2020-12-24T19:45:03.854Z",
"updatedAt": "2020-12-24T19:45:03.854Z",
"clientId": 1,
"employeeId": 1,
"serviceId": null,
"appointmentStatusId": null,
"tenantId": 1,
"employee": {
"firstName": "Aline",
"lastName": "Magalhães"
},
"client": {
"firstName": "Tamires",
"lastName": "Almeida"
}
},
{
"id": 2,
"start": "2020-12-24 01:00",
"end": "2020-12-24 02:00",
"comments": null,
"createdAt": "2020-12-24T19:39:19.184Z",
"updatedAt": "2020-12-24T19:39:19.184Z",
"clientId": 1,
"employeeId": 1,
"serviceId": null,
"appointmentStatusId": null,
"tenantId": 1,
"employee": {
"firstName": "Aline",
"lastName": "Magalhães"
},
"client": {
"firstName": "Tamires",
"lastName": "Almeida"
}
},
{
"id": 13,
"start": "2020-12-25 06:00",
"end": "2020-12-25 07:00",
"comments": "Fuck you",
"createdAt": "2020-12-25T16:24:10.893Z",
"updatedAt": "2020-12-25T16:24:10.893Z",
"clientId": 1,
"employeeId": 2,
"serviceId": 1,
"appointmentStatusId": null,
"tenantId": 1,
"employee": {
"firstName": "Margareth",
"lastName": "Martins"
},
"client": {
"firstName": "Tamires",
"lastName": "Almeida"
}
},
{
"id": 14,
"start": "2020-12-25 01:00",
"end": "2020-12-25 06:00",
"comments": null,
"createdAt": "2020-12-25T22:08:40.878Z",
"updatedAt": "2020-12-25T22:08:40.878Z",
"clientId": 1,
"employeeId": 1,
"serviceId": 1,
"appointmentStatusId": null,
"tenantId": 1,
"employee": {
"firstName": "Aline",
"lastName": "Magalhães"
},
"client": {
"firstName": "Tamires",
"lastName": "Almeida"
}
},
{
"id": 15,
"start": "2020-12-26 08:30",
"end": "2020-12-26 09:00",
"comments": null,
"createdAt": "2020-12-25T22:52:31.439Z",
"updatedAt": "2020-12-25T22:52:31.439Z",
"clientId": 1,
"employeeId": 1,
"serviceId": 1,
"appointmentStatusId": null,
"tenantId": 1,
"employee": {
"firstName": "Aline",
"lastName": "Magalhães"
},
"client": {
"firstName": "Tamires",
"lastName": "Almeida"
}
},
{
"id": 10,
"start": "2020-12-23 09:00",
"end": "2020-12-23 09:30",
"comments": "é fodauuuuuuu",
"createdAt": "2020-12-25T15:12:20.790Z",
"updatedAt": "2020-12-25T15:12:20.790Z",
"clientId": 1,
"employeeId": null,
"serviceId": 1,
"appointmentStatusId": null,
"tenantId": 1,
"employee": null,
"client": {
"firstName": "Tamires",
"lastName": "Almeida"
}
},
{
"id": 11,
"start": "2020-12-23 09:00",
"end": "2020-12-23 12:00",
"comments": "é fodauuuuuuu",
"createdAt": "2020-12-25T15:12:44.161Z",
"updatedAt": "2020-12-25T15:12:44.161Z",
"clientId": 1,
"employeeId": 1,
"serviceId": 1,
"appointmentStatusId": null,
"tenantId": 1,
"employee": {
"firstName": "Aline",
"lastName": "Magalhães"
},
"client": {
"firstName": "Tamires",
"lastName": "Almeida"
}
},
{
"id": 4,
"start": "2020-12-25 01:00",
"end": "2020-12-25 05:00",
"comments": null,
"createdAt": "2020-12-25T02:32:32.574Z",
"updatedAt": "2020-12-25T02:32:32.574Z",
"clientId": 1,
"employeeId": 1,
"serviceId": null,
"appointmentStatusId": null,
"tenantId": 1,
"employee": {
"firstName": "Aline",
"lastName": "Magalhães"
},
"client": {
"firstName": "Tamires",
"lastName": "Almeida"
}
},
{
"id": 5,
"start": "2020-12-24 01:00",
"end": "2020-12-24 03:00",
"comments": "ghhhhhh",
"createdAt": "2020-12-25T02:36:52.243Z",
"updatedAt": "2020-12-25T02:36:52.243Z",
"clientId": 1,
"employeeId": 1,
"serviceId": null,
"appointmentStatusId": null,
"tenantId": 1,
"employee": {
"firstName": "Aline",
"lastName": "Magalhães"
},
"client": {
"firstName": "Tamires",
"lastName": "Almeida"
}
},
{
"id": 6,
"start": "2020-12-25 01:15",
"end": "2020-12-25 02:00",
"comments": null,
"createdAt": "2020-12-25T02:38:22.711Z",
"updatedAt": "2020-12-25T02:38:22.711Z",
"clientId": 1,
"employeeId": 1,
"serviceId": null,
"appointmentStatusId": null,
"tenantId": 1,
"employee": {
"firstName": "Aline",
"lastName": "Magalhães"
},
"client": {
"firstName": "Tamires",
"lastName": "Almeida"
}
},
{
"id": 7,
"start": "2020-12-25 00:15",
"end": "2020-12-25 03:00",
"comments": "treeeeee",
"createdAt": "2020-12-25T14:54:51.766Z",
"updatedAt": "2020-12-25T14:54:51.766Z",
"clientId": 1,
"employeeId": 1,
"serviceId": null,
"appointmentStatusId": null,
"tenantId": 1,
"employee": {
"firstName": "Aline",
"lastName": "Magalhães"
},
"client": {
"firstName": "Tamires",
"lastName": "Almeida"
}
},
{
"id": 8,
"start": "2020-12-25 04:00",
"end": "2020-12-25 06:00",
"comments": null,
"createdAt": "2020-12-25T15:02:54.737Z",
"updatedAt": "2020-12-25T15:02:54.737Z",
"clientId": 1,
"employeeId": 1,
"serviceId": null,
"appointmentStatusId": null,
"tenantId": 1,
"employee": {
"firstName": "Aline",
"lastName": "Magalhães"
},
"client": {
"firstName": "Tamires",
"lastName": "Almeida"
}
},
{
"id": 12,
"start": "2020-12-31 19:30",
"end": "2020-12-31 21:00",
"comments": "Agora foi",
"createdAt": "2020-12-25T15:25:40.233Z",
"updatedAt": "2020-12-25T15:25:40.233Z",
"clientId": 1,
"employeeId": 1,
"serviceId": 1,
"appointmentStatusId": null,
"tenantId": 1,
"employee": {
"firstName": "Aline",
"lastName": "Magalhães"
},
"client": {
"firstName": "Tamires",
"lastName": "Almeida"
}
}
]
我只需要在 V-Calendar vuetify 中呈现其中一些数据，根据其文档，例如:
{
name: 'name'
start: '0000-00-00 00:00'
end: '0000-00-00 00:00'
}
为了达到这个结构，我的 .Vue 中有以下代码片段:
created () {
this.initialize()
},
methods: {
initialize () {
// request Events
axios.get('http://192.168.15.11:3000/events')
.then((response) => {
this.events = response.data
for (const item of this.events) {
const name = item.client.firstName + ' ' + item.client.lastName
const start = item.start
const end = item.end
const items = { name, start, end }
this.events = this.items
console.log(items);
}
})
.catch((error) => {
console.log(error.response);
})
},
我的控制台以我需要的正确格式提供此反馈，但在日历中没有事件:
V 日历摘录:
<v-calendar
ref="calendar"
v-model="focus"
color="primary"
locale="pt-br"
:events="events"
:event-color="getEventColor"
:type="type"
@click:event="showEvent"
@click:more="viewDay"
@click:date="viewDay"
>
</v-calendar>
data: () => ({
events []
}),
我哪里错了，有人可以帮助我吗？
最佳答案
出色的工作为您的问题提供了良好的背景。 V-calendar 希望事件是一个数组，而不是单个对象。
也许尝试这样的事情:
this.events = [];
axios.get('http://192.168.15.11:3000/events')
.then((response) => {
const events = response.data
for (const item of events) {
const name = item.client.firstName + ' ' + item.client.lastName
const start = item.start
const end = item.end
this.events.push({ name, start, end })
}
})
关于vue.js - 在 V-CALENDAR Vuetify Vuejs 中显示来自 Api 的数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65470216/