FullCalendar-vue日历组件 | events数据视图不更新

问题描述
更新了新版依赖后，初始化时的events能正常渲染，但是后面更新events数据视图不生效。
解决方案
参考官网的语法，对事件的新增代码进行调整
官方文档：FullCalendar
官方示例：addEvent

旧版写法
项目原来用的依赖版本比较旧，可以直接通过this.calendarOptions.events = […]的方式修改。

import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";

data () {
  return {
    calendarOptions: {
      plugins: [
          dayGridPlugin,
          timeGridPlugin,
          interactionPlugin, // needed for dateClick
      ],
      customButtons: {
          prev: {
            // this overrides the prev button
            text: "PREV",
            click: () => {
              let calendarApi = this.$refs.fullCalendar.getApi();
              calendarApi.prev();
              this.getData();
            },
          },
          next: {
            // this overrides the next button
            text: "PREV",
            click: () => {
              let calendarApi = this.$refs.fullCalendar.getApi();
              calendarApi.next();
              this.getData();
            },
          },
      },
      selectEventOverlap: false,
      events: [], //事件内容
    }
  }
},
methods: {
	// 请求
	getData() {
		this.calendarOptions.events = [
			{
				id: "2024-09-03",
	            title: "标题",
	            start: "2024-09-03",
	            allDay: true,
	            color: 'transparent'
			}
		]
	}
}

新版写法
描述：
利用官方api：addEvent、remove，对事件新增、溢出操作。

import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";

data () {
  return {
  	eventList: [], // 事件列表
    calendarOptions: {
      plugins: [
          dayGridPlugin,
          timeGridPlugin,
          interactionPlugin, // needed for dateClick
      ],
      customButtons: {
          prev: {
            // this overrides the prev button
            text: "PREV",
            click: () => {
              let calendarApi = this.$refs.fullCalendar.getApi();
              calendarApi.prev();
              this.getData();
            },
          },
          next: {
            // this overrides the next button
            text: "PREV",
            click: () => {
              let calendarApi = this.$refs.fullCalendar.getApi();
              calendarApi.next();
              this.getData();
            },
          },
      },
      selectEventOverlap: false,
      events: [], //事件内容
    }
  }
},
methods: {
	// 请求
	getData() {
		const data= [
			{
				id: "2024-09-03",
	            title: "标题",
	            start: "2024-09-03",
	            allDay: true,
	            color: 'transparent'
			}
		];
		const calendarApi = this.$refs.fullCalendar.getApi();
        const calendarFunc = calendarApi.view.calendar;
        // 先把原有事件移除，避免重复渲染
        this.eventList.map(({ id }) => {
          if (id) {
            calendarFunc.getEventById(id).remove();
          }
        })
        this.eventList = [];
        // 添加事件
        data.map(item => {
          const obj = {
            id: item.Date,
            title: item.Contents.join("\n"),
            start: item.Date,
            allDay: true,
            color: 'transparent'
          };
          calendarApi.addEvent(obj);
          this.eventList.push(obj);
        })
	}
}