javascript - 使用日期选择器事件 vuetify 自定义组件

Question

我在一个新页面中创建了自己的 vuetify 组件，我有一个按钮可以打开一个 vuetify 对话框，该对话框显示一个带有日期选择器的表单。在这个日期选择器中，我希望能够根据日期提供自定义 css 类

请参阅此处了解我到目前为止使用的示例：https ://codepen.io/chansv/pen/LYYyNYd

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      picker: new Date().toISOString().substr(0, 10),
      availableDates: ["2019-10-02", "2019-10-8", "2019-10-11"],
    }
  },
  methods: {
    setColor() {
            let allDates = document.querySelectorAll(".v-date-picker-table .v-btn .v-btn__content");

      allDates.forEach((x, i) => {
        if (i % 4 === 0) {
          allDates[i].classList.add('J1');
        }

        if (i % 4 === 1) {
          allDates[i].classList.add('J2');
        }

      })
    }
  },
  mounted() {
  this.setColor();
}
})

请注意，通常我们会打开一个显示此日期选择器的对话框。当我们更改月份/年份时，我们希望 CSS 类在新月份显示。我试图调查“手表”的使用，但到目前为止还没有成功。我想拦截 datepicker“open”事件以便能够添加所需的 css 类，但我觉得这与旧的 jquery 方式太接近了。直到现在我用这个：https ://api.jqueryui.com/datepicker/#option-beforeShowDay

我是一个 vuejs 新手。

感谢您的帮助

标签： javascriptvue.jsdatepickervuetify.js