是否有可能获得参考元素即 fullCalendar中dateClick函数中的this$ ref吗？

问题描述

我正在为该项目使用vuejs。在FullCalendar（v5.3.0）中，我一直在尝试在月份视图（默认视图）中单击特定日期并将选定日期作为要显示的日期时单击timeGridDay。

我使用ref来引用FullCalendar组件。（此处仅显示相关部分）

<template>
  <div class="main">
    <div class="calendar-holder col-10 section">
      <FullCalendar ref="fullcalendar" :options="options" />
    </div>
  </div>
</template>

然后我试图使用dateClick方法单击日期时进入timeGridDay视图。

data(){
  return {
    calendarapi: null,options: {
      plugins: [ 
        dayGridplugin,timeGridplugin,interactionPlugin,listPlugin 
      ],initialView: 'dayGridMonth',dateClick: function(info) {
        if(confirm('View Schedule?')){
          let calendarapi = this.$ref.fullcalendar.getApi();
          calendarapi.fullCalendar('changeView','timeGridDay',info.date);
        }
      }
    }
  }
}

这不起作用。当我检查控制台时，它说

TypeError：this。$ ref未定义

但是当我在挂接的钩子中尝试相同的代码（在数据中初始化calendarapi）时，它并不是未定义的

mounted(){
  this.calendarapi = this.$refs.fullcalendar.getApi();
  console.log(this.calendarapi)
}

返回一个对象。但是我无法在dateClick方法中获取该calendarapi对象。我尝试过：

dateClick: function(info) {
  if(confirm('View Schedule?')){
    this.calendarapi.fullCalendar('changeView',info.date);
  }
}

没有用。控制台出现此错误：

TypeError：this.calendarapi未定义

有什么办法可以解决这个问题？我也尝试从另一个方法中获取calendarapi对象，但控制台表示该方法未定义。预先感谢。

解决方法

我通过将dateClick功能更改为：

          dateClick: (info) => {
            if(confirm('View Schedule?')){
              let calendarApi = this.$refs.fullcalendar.getApi();
              calendarApi.changeView('timeGridDay',info.date);
            }
          }

您可以在以下链接中找到更多信息：https://fullcalendar.io/docs/Calendar-changeView

fullcalendar-5 vue.js