Vuetify中v-calendar组件@click:day等点击回调函数不触发问题

问题修复方案 #

你遇到的点击事件不触发的情况主要由三个可修复的问题导致：

• 语法错误：当前script段组件配置末尾缺少一个闭合的}，会导致组件初始化失败，方法无法正常注册
• 输出方法错误：浏览器环境下没有全局print控制台输出方法，你写的print()会触发系统打印弹窗，调试输出需要用console.log()
• 事件适配：不同版本Vuetify的v-calendar日期点击事件命名有差异，2.x版本为@click:day，3.x版本调整为@click:date，同时绑定两个事件即可兼容所有版本

修正后的完整代码 #

<template>
  <v-container>
    <v-row class="pa-5">
      <v-calendar
        ref="calendar"
        v-model="value" 
        :type="type"
        :events="events"
        :event-color="eventColor"     
        @click:day="viewDay"
        @click:date="viewDay"
      > 
      </v-calendar>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "Reservations",
  data() {
    return {
      // 初始化赋值合法日期，避免组件初始化异常
      value: new Date(),
      type: "month",
      events: [],
      mode: "stack",
      picker: "",
      eventColor: 'blue'
    };
  },
  methods: {
    viewDay({date}) {
      console.log('abc')
      console.log(date)
    }
  }
};
</script>

修改完成后点击任意日期单元格，即可在开发者工具控制台看到对应的日期输出，你可以直接取date参数做后续业务逻辑处理。

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