Javascript 未触发Fullcalendar dateclick和eventclick事件

我已在vuejs中配置fullcalendar。我在使用fullcalendar事件时遇到问题。当我尝试触发这些事件dateClick和eventClick时，控制台上会出现以下警告：

事件“dateclick”在组件中发出，但 已为“dateClick”注册处理程序。请注意，HTML属性是 不区分大小写，不能使用v-on侦听camelCase事件 在DOM模板中使用时。您可能应该使用“日期单击” 而不是“日期点击”

我也尝试过切换到日期点击，但没有成功

我的Html

    <script src="~/Scripts/vue/vue.js"></script>
    <link href='https://unpkg.com/@fullcalendar/core@4.1.0/main.css' rel='stylesheet' />
    <link href='https://unpkg.com/@fullcalendar/daygrid@4.1.0/main.css' rel='stylesheet' />
    <link href='https://unpkg.com/@fullcalendar/timegrid@4.1.0/main.css' rel='stylesheet' />
    <script src='https://unpkg.com/@fullcalendar/core@4.1.0/main.js'></script>
    <script src='https://unpkg.com/@fullcalendar/daygrid@4.1.0/main.js'></script>
    <script src='https://unpkg.com/@fullcalendar/timegrid@4.1.0/main.js'></script>
    <script src='https://unpkg.com/@fullcalendar/interaction@4.1.0/main.js'></script>
    <script src="https://unpkg.com/@fullcalendar/vue@4.1.0/main.umd.js"></script>

    <div id="app-el">
                    <full-calendar class="app-calendar"
                           default-view="dayGridMonth"
                           ref="fullCalendar"
                           :header="{
                                    left: 'prev,next today',
                                    center: 'title',
                                    right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
                                }"
                           :plugins="plugins"
                           :weekends="true"
                           :events="events"
                             
                           @@eventClick="eventClick"
                           @@dateClick="handleDateClick" />
    </div>

---

您正在将vuejs用作cdn的本地资源。因此，您需要使用html的约定。不能将camel case用作事件侦听器。您需要改用连字符。例如使用：

---

@@date click=“handleDateClick”

而不是

@@dateClick=“handleDateClick”

您可以使用：

@@date click=“handleDateClick”而不是@dateClick=“handleDateClick”

，如果这不起作用，您可以参考以下讨论：

您可以尝试以下解决方案：

<full-calendar ... @date-click="handleDateClick" />
 ...
 mounted() {
    const camelize = str => str.split('-').map((item, index) => index ? item.charAt(0).toUpperCase() + item.slice(1).toLowerCase() : item).join("")
    Object.keys(this.$refs.fullCalendar._events).forEach(name=>this.$refs.fullCalendar._events[camelize(name)] = this.$refs.fullCalendar._events[name])
}
...

...
安装的（）{
const camelize=str=>str.split（'-'）.map（（项，索引）=>index？item.charAt（0）.toUpperCase（）+item.slice（1）.toLowerCase（）：item.join（“”）
Object.keys（this.$refs.fullCalendar.\u events）.forEach（name=>this.$refs.fullCalendar.\u events[camelize（name）]=this.$refs.fullCalendar.\u events[name]）
}
...

如需进一步参考，您可以查看：

<full-calendar ... @date-click="handleDateClick" />
 ...
 mounted() {
    const camelize = str => str.split('-').map((item, index) => index ? item.charAt(0).toUpperCase() + item.slice(1).toLowerCase() : item).join("")
    Object.keys(this.$refs.fullCalendar._events).forEach(name=>this.$refs.fullCalendar._events[camelize(name)] = this.$refs.fullCalendar._events[name])
}
...