Vue.js日历开发问题：点击按钮后月份无法在HTML中显示

一、页面不更新的核心原因 #

先拆解你代码里的几个关键问题，这些直接导致了数据更新但视图没同步：

1. data选项使用箭头函数导致this指向错误
   你在data里用了箭头函数() => {}，这会让this不指向Vue实例，而是外部上下文，所以你定义的Month、textMonth根本不是响应式数据，修改后自然不会触发页面更新。

2. data里的变量定义错误

   • 拼写错误：textMont应该是textMonth；
   • 初始化逻辑错误：Month: this.Month、textMonth: this.textMonth这种写法，此时this不是Vue实例，等于初始化了undefined的变量。

3. test方法里的未定义变量
   你写了this.textMonth = date.toLocaleString(...)，但date没定义，应该是你外部的CurrentDate。

4. 外部变量CurrentDate的风险
   把CurrentDate放在组件外部，会导致多个组件实例共享同一个日期对象，容易出现状态混乱。

二、修正后的代码示例 #

把这些问题修复后，数据就能正常响应式更新了：

<div class="calendar-header">
  <div class="right"> 
    <button type="button" class="btn btn-dark" v-on:click="prevMonth"> Previous </button> 
  </div> 
  <div class="middle"> 
    <h4>{{ textMonth }}</h4> 
  </div> 
  <div class="left"> 
    <button type="button" class="btn btn-dark" v-on:click="nextMonth">Next</button> 
  </div>
</div>

export default {
  data() { // 这里用普通函数，不要用箭头函数，保证this指向Vue实例
    const currentDate = new Date();
    return {
      meeting: null, // 根据你的业务需求初始化，没有则留空或删除
      currentDate: currentDate, // 把日期对象存入响应式数据
      textMonth: currentDate.toLocaleString("default", { month: "long" })
    };
  },
  methods: {
    prevMonth() {
      this.currentDate.setMonth(this.currentDate.getMonth() - 1);
      this.textMonth = this.currentDate.toLocaleString("default", { month: "long" });
      console.log(this.currentDate.getMonth());
    },
    nextMonth() {
      this.currentDate.setMonth(this.currentDate.getMonth() + 1);
      this.textMonth = this.currentDate.toLocaleString("default", { month: "long" });
    }
  }
};

三、更简便的日历实现方案 #

如果不想从零写日历逻辑，推荐两种高效思路：

1. 使用成熟的Vue日历组件库

• vue-calendar: 轻量灵活，支持月/周视图切换，自定义样式成本低；
• Element Plus ElCalendar: 如果你已经在用Element Plus，直接用这个组件，自带月份切换、日期选中功能，开箱即用；
• FullCalendar Vue: 功能全面，支持日程管理、多视图切换，适合复杂的日历需求。

2. 用日期库简化手动实现

自己写逻辑的话，推荐用date-fns或dayjs处理日期，避免原生Date的坑，代码更简洁：

import { subMonths, addMonths, format } from 'date-fns';

export default {
  data() {
    return {
      currentDate: new Date()
    };
  },
  computed: { // 用计算属性自动更新月份文本，无需手动赋值
    textMonth() {
      return format(this.currentDate, 'MMMM'); // 对应long格式的月份名称
    }
  },
  methods: {
    prevMonth() {
      this.currentDate = subMonths(this.currentDate, 1);
    },
    nextMonth() {
      this.currentDate = addMonths(this.currentDate, 1);
    }
  }
};

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