在 V-CALENDAR Vuetify Vuejs 中显示来自 Api 的数据

Question

我的 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 []
      
    }),

我哪里错了，谁能帮帮我？

Answer 1

为您的问题提供良好背景的出色工作。 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 })
          }
        })

在 V-CALENDAR Vuetify Vuejs 中显示来自 Api 的数据

Display data from an Api in the V-CALENDAR Vuetify Vuejs

vcalendar

fullcalendar

vue.js

vuetify.js