Vue项目中从对象向FullCalendar添加事件不显示如何解决

• 响应式绑定失效：初始化calendarOptions.events时赋值的是allevents初始空数组的引用，后续重新给allevents赋值新数组时，calendarOptions.events仍然指向原空数组，FullCalendar无法感知数据更新。
• 属性类型错误：事件的allDay属性被赋值为字符串'true'，FullCalendar要求该属性为布尔值true，类型不匹配会导致事件解析失败。
• 未声明变量直接赋值：listDataString没有在data中提前声明，严格模式下会抛出运行警告。

直接更新calendarOptions内的events属性，同时修正allDay的属性类型，提前声明用到的响应式变量即可，修复后代码如下：

import axios from "axios";
import "@fullcalendar/core/vdom";
import FullCalendar from "@fullcalendar/vue3";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";

export default {
  name: "calendar",
  components: {
    FullCalendar,
  },
  data() {
    return {
      listDataString: "",
      calendarOptions: {
        plugins: [dayGridPlugin, interactionPlugin],
        initialView: "dayGridMonth",
        dateClick: this.handleDateClick,
        events: [], // 直接在配置项内定义events初始值
      },
    };
  },
  mounted() {
    axios
      .get("url_json")
      .then((response) => {
        this.listDataString = JSON.stringify(response.data, null, "\t");
        // 直接更新配置项内的events
        this.calendarOptions.events = response.data.result.map(eventnew => ({
          title: eventnew.subject, 
          start: eventnew.start.dateTime, 
          end: eventnew.end.dateTime, 
          allDay: true // 修正为布尔值
        }));
        console.log(this.calendarOptions.events);
        return response;
      });
  },
  methods: {
    handleDateClick() {
      // 此处保留原有点击逻辑即可
    }
  }
};

内容的提问来源于stack exchange，提问作者Paweł Czepiel