Vue3 v-calendar v-date-picker切换月份事件监听问题

你的代码里有一个直接导致事件无法触发的错误：模板中绑定的事件处理函数名与setup里定义的函数名不匹配。

模板里写的是@change:month="changeMonth"，但setup中定义并导出的函数是monthChange，两者名称不一致，导致月份切换时找不到对应的处理函数。

修正步骤 #

将模板中的事件绑定改为@change:month="monthChange"，或者把setup里的函数名改为changeMonth，确保两者名称完全一致即可。

修正后的完整代码示例 #

<v-date-picker
    v-if="reservList[0].dates.length>0"
    is-expanded
    locale="ko"
    color="indigo"
    class="date-picker"
    :model-config="{
        type: 'string',
        mask: 'YYYY-MM-DD',
    }"
    :masks="{  L: 'YYYY.MM.DD',title: 'YYYY년 MM월' }"
    mode="date"
    v-model="pickDate"
    :attributes="reservList"
    :reactive="true"
    @change:month="monthChange"
>

</v-date-picker>

<script>
export default{
    setup(){
        function monthChange(e){
            console.log('test',e);
        }

        return{
            monthChange
        }
    }
}
</script>

额外检查点 #

1. 确认使用的v-calendar版本为v2.x，@change:month是v2版本才支持的事件；
2. 确保reservList[0].dates.length>0条件为真，组件已正常渲染，否则事件绑定不会生效。

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