Vue3搭配Vuetify使用FullCalendar调用函数时出现多类报错如何解决

问题根因 #

• data使用箭头函数导致this指向异常：Vue选项式API中data不能使用箭头函数，箭头函数的this绑定父级作用域而非组件实例，导致你在data中访问this.handleDateSelect时无法找到对应方法，同时data初始化失败会导致calendarOptions未定义，触发后续模板调用的连锁报错。
• FullCalendar依赖版本不匹配Vue3：你当前导入的@fullcalendar/vue是适配Vue2的依赖，Vue3项目需要使用@fullcalendar/vue3版本。
• 缺失createEventId方法定义：代码中调用了createEventId生成事件唯一ID，但未定义该方法，功能运行时会触发额外报错。

修正方案 #

第一步：安装适配Vue3的FullCalendar依赖 #

npm install @fullcalendar/vue3 @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/interaction

第二步：替换修正代码 #

<template>
  <div class='demo-app'>
    <div class='demo-app-sidebar'>
      <div class='demo-app-sidebar-section'>
        <h2>使用说明</h2>
        <ul>
          <li>选择日期后将弹出提示创建新事件</li>
          <li>可拖拽、放置、调整事件大小</li>
          <li>点击事件可删除</li>
        </ul>
      </div>
      <div class='demo-app-sidebar-section'>
        <label>
          <input
            type='checkbox'
            :checked='calendarOptions.weekends'
            @change='handleWeekendsToggle'
          />
          切换周末显示
        </label>
      </div>
      <div class='demo-app-sidebar-section'>
        <h2>全部事件 ({{ currentEvents.length }})</h2>
        <ul>
          <li v-for='event in currentEvents' :key='event.id'>
            <b>{{ event.startStr }}</b>
            <i>{{ event.title }}</i>
          </li>
        </ul>
      </div>
    </div>
    <div class='demo-app-main'>
      <FullCalendar
        class='demo-app-calendar'
        :options='calendarOptions'
      >
        <template v-slot:eventContent='arg'>
          <b>{{ arg.timeText }}</b>
          <i>{{ arg.event.title }}</i>
        </template>
      </FullCalendar>
    </div>
  </div>
</template>

<script>
// 替换为Vue3版本的FullCalendar组件
import FullCalendar from '@fullcalendar/vue3'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'

// 简易生成唯一ID方法，也可自行替换为其他ID生成逻辑
let eventId = 1
function createEventId() {
  return String(eventId++)
}

export default {
  components: {
    FullCalendar
  },
  // 将箭头函数改为普通函数，保证this指向组件实例
  data() {
    return {
      calendarOptions: {
        plugins: [
          dayGridPlugin,
          timeGridPlugin,
          interactionPlugin
        ],
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        initialView: 'dayGridMonth',
        editable: true,
        selectable: true,
        selectMirror: true,
        dayMaxEvents: true,
        weekends: true,
        select: this.handleDateSelect,
        eventClick: this.handleEventClick,
        eventsSet: this.handleEvents
      },
      currentEvents: []
    }
  },
  methods: {
    handleWeekendsToggle() {
      this.calendarOptions.weekends = !this.calendarOptions.weekends
    },
    handleDateSelect(selectInfo) {
      let title = prompt('Please enter a new title for your event')
      let calendarApi = selectInfo.view.calendar
      calendarApi.unselect()
      if (title) {
        calendarApi.addEvent({
          id: createEventId(),
          title,
          start: selectInfo.startStr,
          end: selectInfo.endStr,
          allDay: selectInfo.allDay
        })
      }
    },
    handleEventClick(clickInfo) {
      if (confirm(`Are you sure you want to delete the event '${clickInfo.event.title}'`)) {
        clickInfo.event.remove()
      }
    },
    handleEvents(events) {
      this.currentEvents = events
    }
  },
};
</script>

<style lang='css' scoped>
  h2 {
    margin: 0;
    font-size: 16px;
  }
  ul {
    margin: 0;
    padding: 0 0 0 1.5em;
  }
  li {
    margin: 1.5em 0;
    padding: 0;
  }
  b {
    margin-right: 3px;
  }
  .demo-app {
    display: flex;
    min-height: 100%;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 14px;
  }
  .demo-app-sidebar {
    width: 300px;
    line-height: 1.5;
    background: #eaf9ff;
    border-right: 1px solid #d3e2e8;
  }
  .demo-app-sidebar-section {
    padding: 2em;
  }
  .demo-app-main {
    flex-grow: 1;
    padding: 3em;
  }
  .fc {
    max-width: 1100px;
    margin: 0 auto;
  }
</style>

内容的提问来源于stack exchange，提问作者Bjorn Ruiz