全日历/VUE 应用程序中的事件未更新

Question

在我的cal.vue组件中，我有一个fullcalendar组件。在cal.vue中，我有一个名为提交的方法。在提交内部，我使用this.$refs.calendar对fullcalendar组件进行了(成功的(引用。但是，当我在提交函数中this.$refs.calendar.$emit('refetchEvents');时，不会获取事件(我的事件不会在我的日历上更新(。为什么我的活动在提交时没有更新，如何更新？

以下是相关代码：

<template>
<div id="calendar"  :navL="navLinks" :event-sources="eventSources" @event-selected="eventSelected" @event-created="eventCreated" :config="config" >
<button    class="btn btn-secondary" v-on:click="submit()">
Submit
</button>
<full-calendar id="target" ref="calendar" :event-sources="eventSources" @event-selected="eventSelected" @day-click="click"@event-created="eventCreated" :config="config"></full-calendar>
</div>
</template>
<script>
const self = this;
export default {
name: 'calendar',
data() {
return {
eventSources: [
{
url: 'http://localhost:3000/getAppointments',
type: 'GET',
data: {
id: this.$store.getters.user
},
error: function() {
alert('there was an error while fetching events!');
},
}
],  
};
},
methods: {
submit: function() {
console.log(this.$refs.calendar); //prints fullcalendar VUE component
this.$refs.calendar.$emit('refetchEvents'); //nothing appears to happen here
},
},
}
</script>

Answer 1

根据文档，

this.$refs.calendar.$emit('refetchEvents')

应该是

this.$refs.calendar.$emit('refetch-events')

Answer 2

如果通过 npm 包使用原版 FullCalendar："@fullcalendar/core"、"@fullcalendar/daygrid"、"@fullcalendar/timegrid"、"@fullcalendar/vue">

html: <full-calendar ref="fullCalendar" :events="events" />
inside a method to update an event:
let calendar = this.$refs.fullCalendar.getApi()
const updatedEvent = calendar.getEventById(eventId)
updatedEvent.setProp('title', 'New Title')
updatedEvent.setProp('backgroundColor', 'yellow')
updatedEvent.setProp('borderColor', 'yellow')
updatedEvent.setProp('textColor', 'black')

以上将重新呈现 fullCalendar 事件，但不会更改您的 this.events 数组。对于所有事件，可能会有一些东西在一个镜头中更加包罗万象，否则你必须这样做：

this.events.forEach(event => {
...similar code the above
})