Vue Material Year Calendar插件：activeDates.push()后日历未选中，如何解决？

Vue Material Year Calendar 插件 activeDates.push() 后日历未更新选中状态的解决方案

使用 vue-material-year-calendar 插件时，开发者常遇到将日期添加到 activeDates 数组后，日历未更新选中状态的问题。本文将分析原因并提供 Vue 2 和 Vue 3 的解决方案。

问题描述：

按照文档示例，使用 activeDates.sync 指令绑定 activeDates 数组，并通过 push 方法添加日期，期望更新日历选中状态，但日历界面未显示选中效果。

立即学习“前端免费学习笔记（深入）”；

代码示例 (Vue 2):

<yearcalendar :activeclass="activeclass" :activedates.sync="activedates" prefixclass="your_customized_wrapper_class" v-model="year"></yearcalendar>data() {  return {    year: 2019,    activedates: [      { date: '2019-02-13' },      { date: '2019-02-14', classname: 'red' },      // ...    ],    activeclass: '',  };},toggledate(dateinfo) {  const index = this.activedates.indexOf(dateinfo);  if (index === -1) {    this.activedates.push(dateinfo);  } else {    this.activedates.splice(index, 1);  }}

登录后复制