v-calendarのv-date-pickerで現在表示されている年月を取得する

概要

v-calendarのv-date-pickerで表示付きを変更した際に検知する方法がなかったので独自に実装したという話

Why

Vuetify.jsのv-date-pickerでは下記の文献のように
https://stackoverflow.com/questions/67896563/current-month-not-selected-when-go-previous-month-and-open-the-v-date-picker-aga

  <v-date-picker :pickerDate.sync="pickerDate" />

こんな感じで変更された月も取れるようなのですが、v-calendarの方のv-date-pickerではそれが存在しないようなので独自に作ってみたいと思いました。

How

カレンダーの月情報にアクセスする

    <v-date-picker
      v-model='selectedDate'
      ref="datePicker"
    />

このような形でrefを定義してあげます。
そして、選択されている月は

this.$refs.datePicker.$refs.calendar.pages[0].key

このような形で取得することができます。

月の情報をwatchしたい

値が取れているということはこれをwatchすれば良さそうなのですが、そのまま書いてみると

  watch: {
    'this.$refs.datePicker.$refs.calendar.pages[0].key': {
       // ホゲホゲ
    }

下記のようにエラーになってしまう。

Failed watching path: "this.$refs.datePicker.$refs.calendar.pages[0].key" Watcher only accepts simple dot-delimited paths. For full control, use a function instead.

computedで値を取るようにしても$refsに関してはちゃんと動かないようでして簡単には行きません。

そこで、
https://stackoverflow.com/questions/39035498/vuejs-watch-refs
こちらの文献を参考に

  mounted() {
    this.$watch(
        () => {
            return this.$refs.datePicker.$refs.calendar.pages[0].key
        },
      (val) => {
        this.displayMonth = val
      }
    )
  }

このように定義してあげることで月が月の変化を検知することができます。