Vue完整日历动态事件未显示

Question

我在接下来的3个项目中使用了fullcalendar插件，我需要在日历上设置事件，但我的事件来自API，所以我已经采用了const upcomingEventData = ref([])const，在API响应之后，我正在更新API返回的事件变量，但它没有反映在日历上。

<FullCalendar :options="calendarOptions">
<template v-slot:eventContent="arg">
<el-tag :type="arg.event.extendedProps.type" size="large">
{{arg.event.title}}
</el-tag>
</template>
</FullCalendar>

const upcomingEventData = ref([]);
const calendarOptions = {
...FullCalendar.options,
initialView: "dayGridMonth",
dateClick: handleDateClick(),
dayHeaderContent: function (arg) {
return arg.text.toUpperCase();
},
},
events: upcomingEventData.value,
eventColor: "#FFFFFF",
eventChange: function (arg) {
console.log('Data--> ' , arg);
},
headerToolbar: {
start: "today prev,next", 
center: "title",
end: "dayGridMonth,dayGridWeek,dayGridDay",
},
buttonText: {
today: "Today",
month: "Month",
week: "Week",
day: "Day",
list: "List",
},
buttonIcons: {
prev: "chevron-left",
next: "chevron-right",
prevYear: "chevrons-left", // double chevron
nextYear: "chevrons-right", // double chevron
},
};
const getEventData = async () => {
const { data, error } = await useGetQuery("event/get");
if (error.value) {
useErrorHandling(error.value);
}
if (data.value) {
let response = data.value.data;
upcomingEventData.value = [];
response.data.forEach((element, index) => {
upcomingEventData.value[index] = {
title: element.eventTitle,
date: formatDate(new Date(element.eventDate), "YYYY-MM-DD"),
type: "success",
}
});
}
};
onMounted(() => {
getEventData();
});

我想我需要再次刷新日历一旦upcomingEventData常数更新。请帮助我，并询问是否需要更多的细节。

Thanks in advance

Answer 1

我已经使用value computed property修复了这个问题。我刚刚用计算的constcalendarOptions = computed(() => { ... }包装了calendarOptions常量。

const calendarOptions = computed(() => {
return {
...FullCalendar.options,
initialView: "dayGridMonth",
dateClick: handleDateClick(),
},
events: upcomingEventData.value,
eventColor: "#FFFFFF",
eventChange: function (arg) {},
headerToolbar: {
start: "today prev,next",
center: "title",
end: "dayGridMonth,dayGridWeek,dayGridDay",
},
buttonText: {
today: "Today",
month: "Month",
week: "Week",
day: "Day",
list: "List",
},
buttonIcons: {
prev: "chevron-left",
next: "chevron-right",
prevYear: "chevrons-left", // double chevron
nextYear: "chevrons-right", // double chevron
},
};
});