vue-material-year-calendar 插件 activeDates.push(dateInfo)数据后日历上不显示选中?

作者站长头像
站长
· 阅读数 12

https://github.com/reinerBa/vue-material-year-calendar?tab=readme-ov-file我是按照官方文档上写demo,activeDates点击的日期已经在数组里,但日历上不显示选中状态vue-material-year-calendar 插件 activeDates.push(dateInfo)数据后日历上不显示选中?按官方文档,data初始化时的值是正常的,是什么原因?谢谢。vue-material-year-calendar 插件 activeDates.push(dateInfo)数据后日历上不显示选中?

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