如何在 vue.js 中使用 gotoDate？答案

【问题标题】：How to Use gotoDate with vue.js?如何在 vue.js 中使用 gotoDate？
【发布时间】：2020-06-26 05:37:33
【问题描述】：

https://fullcalendar.io/docs/v4/Calendar-gotoDate

我不知道如何在 vue.js 中使用 calendar.gotoDate(date)

例如 https://fullcalendar.io/docs/v4/defaultDate 访问 defaultDate 我只是将它添加到并工作，gotoDate 在这里不起作用。

          <FullCalendar
                :key="calendarRender"
                ref="fullCalendar"
                defaultView="dayGridMonth"
                :header="{
                    left: 'prev,next today',
                    center: 'title',
                    right: ''
                  }"
                :plugins="calendarPlugins"
                :weekends="calendarWeekends"
                :events="calendarEvents"
                :selectable="true"
                :selectOverlap="false"
                @eventRender="eventRender"
                :dayRender="dayRender"
                :selectAllow="selectAllow"
                :allDayDefault="false"
                @select="select"
                :showNonCurrentDates="false"
                :fixedWeekCount="false"
                :goToDate="currentDate"
            />

尝试使用，但两者都不起作用。在两个不是函数的情况下都出现错误。

this.$refs.fullCalendar.gotoDate(new Date('2020-08-11'));
this.$refs.fullCalendar.calendar.gotoDate(new Date('2020-08-11'));

目的是在我保存并强制它重新渲染以显示新数据后，它会返回到 Jun 而不是我正在处理的当前月份。

【问题讨论】：

运行console.log(this.$refs.fullCalendar)，然后在控制台中检查对象的内容以查找此gotoDate 函数或属性在哪里。此外，请检查您的模板是否使用了正确的名称字母大小写 - gotoDate 或 goToDate。
感谢回答，我其实是用vue dev tool看的。

标签： javascript vue.js fullcalendar fullcalendar-4

【解决方案1】：

根据https://fullcalendar.io/docs/v4/vue（在标题为“访问 FullCalendar 的 API”的部分中），您必须先获取日历 API 对象，然后才能对其调用方法。您必须调用一个特定的方法 getApi() 来执行此操作。

这是文档中提到的示例：

要做这样的事情，你需要掌握组件的 ref（“参考”的缩写）。在模板中：

<FullCalendar ref="fullCalendar" :plugins="calendarPlugins" />

一次你有 ref，你可以通过 getApi 方法：

let calendarApi = this.$refs.fullCalendar.getApi()

calendarApi.next()

在你的情况下，你会打电话给next()

calendarApi.goToDate('2020-08-11');

（注意这里也不需要使用new Date - fullCalendar 会自动使用accept an ISO8601 date string。）

【讨论】：