vue-material-year-calendar 插件 activeDates.push(dateInfo)数据后日历上不显示选中?
https://github.com/reinerBa/vue-material-year-calendar?tab=readme-ov-file我是按照官方文档上写demo,activeDates点击的日期已经在数组里,但日历上不显示选中状态按官方文档,data初始化时的值是正常的,是什么原因?谢谢。
<YearCalendar
v-model="year"
:activeDates.sync="activeDates"
@toggleDate="toggleDate"
prefixClass="your_customized_wrapper_class"
:activeClass="activeClass"
></YearCalendar>
data() {
return {
year: 2019,
activeDates: [
{ date: '2019-02-13' },
{ date: '2019-02-14', className: 'red' },
{ date: '2019-02-15', className: 'blue' },
{ date: '2019-02-16', className: 'your_customized_classname' }
],
activeClass: '',
}
},
// 这里是点击日期的事件
toggleDate(dateInfo) {
const index = this.activeDates.indexOf(dateInfo)
if (index === -1) {
// 将日期push到选中 activeDates 内
this.activeDates.push(dateInfo)
console.log(dateInfo)
console.log(this.activeDates); // activeDates点击的日期已经在数组里,但日历上不显示选中状态
} else {
this.activeDates.splice(index, 1)
}
}
回复
1个回答

test
2024-06-23
找到问题了:vue2方法:
<YearCalendar
v-model="year"
:activeDates="activeDates"
@toggleDate="toggleDate"
prefixClass="your_customized_wrapper_class"
:activeClass="activeClass"
></YearCalendar>
vue3方法:关键是: ref[...]
const activeDates: { date: string; selected: boolean; className?: string }[] = 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' }
])
回复

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容