Vuetify <v-calendar>无法检测Next/Previous按钮点击求助

环境信息 #

• Vue版本：3.5.13
• Vuetify版本：3.7.5
• 项目类型：Laravel Vue项目

日历组件代码 #

<div id="calendarDiv">
  <v-calendar
    ref="calendar"
    v-model="value"
    :events="events"
    :view-mode="type"
    :weekdays="weekday"
    @next="nextClicked()"
    @next:click="nextClicked()"
    @click:next="nextClicked()"
    @click:event="showEvent"
    @click:date="viewDay"
    @change="onChange"
  />
</div>

初始化逻辑 #

mounted() {
  this.$nextTick(() => {
    this.loadCalendar();
  });
},

loadCalendar()通过AJAX请求更新this.events，初始事件可正常显示，但Next/Previous按钮的点击无法被检测到。按文档说明next和prev事件可用，尝试了网上推荐的change事件也无效，仅基础click事件可触发。

解决方案 #

1. 修正事件绑定格式 #

Vuetify 3 VCalendar的导航按钮正确事件是@click:prev和@click:next，且绑定方法时不要加括号（加括号会导致组件初始化时立即执行，而非点击触发）：

<v-calendar
  ...
  @click:next="nextClicked"
  @click:prev="prevClicked"
  ...
/>

2. 监听update:model-value捕获视图切换 #

导航按钮点击会更新v-model绑定的value，可以通过update:model-value事件监听视图变化：

<v-calendar
  ...
  @update:model-value="onViewChange"
  ...
/>

对应的方法实现：

onViewChange(newValue) {
  this.value = newValue;
  this.loadCalendar(); // 重新加载日历事件
}

3. 监听value变化触发更新 #

通过Vue的watch监听value的变化，自动触发事件加载逻辑：

watch: {
  value: {
    immediate: true,
    handler(newVal) {
      this.loadCalendar();
    }
  }
}

4. 版本兼容性检查 #

Vuetify 3.7.x的VCalendar可能存在事件绑定的小bug，建议升级到最新稳定版，或查阅对应版本的官方文档确认事件名称的准确性。

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