Vue-Material-Year-Calendar 插件中 activeDates.push() 后日历不显示选中状态如何解决？

在使用 vue-material-year-calendar 插件时，不少开发者会遇到点击日期后日历没有正确显示选中状态的问题。按照官方文档的说明，将日期信息 push 到 activeDates 数组中，日期就应该被标记为选中状态，但实际操作中经常会出现不生效的情况。

原因和解决方法

出现这个问题的核心原因是不同版本的 Vue 响应式处理机制存在差异，需要针对 Vue 2 和 Vue 3 分别采用对应的处理方式，才能让日历正确渲染选中状态。

Vue 2 处理方法

在 Vue 2 环境下，首先要确保组件绑定的属性是 activedates 而不是 :activedates.sync，避免双向绑定语法导致的响应式异常。参考代码如下：

<yearcalendar
  v-model="year"
  activedates="activedates"
  @toggledate="toggledate"
  prefixclass="your_customized_wrapper_class"
  :activeclass="activeclass"
/>

接着在 toggledate 方法中，手动给新增的日期对象添加 selected: true 属性，确保选中状态被正确标记。具体实现如下：

toggledate(dateinfo) {
  const index = this.activedates.indexOf(dateinfo);
  if (index === -1) {
    // 新增日期时手动设置selected为true，保证选中状态生效
    this.activedates.push({ ...dateinfo, selected: true });
  } else {
    // 已存在的日期则移除，实现取消选中效果
    this.activedates.splice(index, 1);
  }
}

Vue 3 处理方法

Vue 3 中需要使用 ref 创建响应式数组，并且初始化时就需要给每个日期对象明确设置 selected 状态和自定义类名等属性，保证响应式的正确性。示例代码如下：

import { ref } from 'vue';

const activeDates = ref([
  { date: '2024-02-13', selected: true, className: '' },
  { date: '2024-02-14', className: 'red' },
  { date: '2024-02-15', className: 'blue' },
  { date: '2024-02-16', className: 'your_customized_classname' },
]);

后续如果需要动态添加选中日期，同样要保证新增的对象包含 selected: true 属性，并且通过 activeDates.value.push() 的方式修改数组，才能触发视图更新。

vue解决方法forCalendar修改时间：2026-05-28 15:41:10