javascript - 如何使用完整日历和 Vue js 在日历中显示数据？

Question

我正在尝试在日历上显示我的数据。我正在使用完整日历和 Vue js。我成功检索了数据，我正在使用发出 api 请求的 service.file，该文件加载数据并将其加载到事件中:''。这是在后端的 Laravel/php 中完成的。如果您需要查看此代码，请告诉我，但它只是将我的访谈表中的所有内容返回到 json 中。当我 console.log() 时，我可以看到数据，并且尝试将其绑定(bind)到 <Fullcalendar /> 上。组件如下所示，但我无法让它显示在日历中。我做错了什么？

<template>
    <div>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-12">
                    <Fullcalendar :plugins="calendarPlugins" :events="events" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Fullcalendar from "@fullcalendar/vue";
    import dayGridPlugin from "@fullcalendar/daygrid";
    import timeGridPlugin from "@fullcalendar/timegrid";
    import interactionPlugin from "@fullcalendar/interaction";
    import * as employerInterviewService from '../services/employer_interview_service.js';

export default {

        components: {
            Fullcalendar
        },

        data() {
            return {
                calendarPlugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
                events: "",
            };
        },

        created() {
            this.getEvents();
        },

        methods: {

            getEvents: async function() {
                const response = await employerInterviewService.loadInterviews();
                this.events = response.data.events;

                console.log(this.events);

            },

        },

    };
</script>

Answer 1

我将表格中的列从 start_date 更改为 start，并且表格中的 title 列为空。我向其中添加了一些数据，现在它可以工作了。 –