Vuetifyのv-menuが表示されたときや非表示になったときに何か処理をしたい Vuetify 2.x その0001

参考にさせていただいたページ

• javascript - How disable to select minutes in v-time-picker widget? - Stack Overflow

今日の環境

• vue: 2.6.11
• vuetify: 2.5.4
• @vue/composition-api: v1.0.0-beta.22

はじめに

Vue2のcompositon apiなので、Vue3だとまたちょっと違うかもしれません。

v-menuが表示されたときや非表示になったときに何か処理をしたい

時間が無いのでざっくり書いておきます。

気が向いたらそのうち直します。

参考ページにあるように、v-modelで取得できます。

      〜略〜
      <v-menu
        v-model="menuState.isShown"
      >
      〜略〜

menuStateはsetup()の中で、composition APIのreactiveで定義してreturnします。

  〜略〜
  setup() {
    const menuState = reactive({
      isShown: false,
    });

    watch(() => menuState.isShown, (isShown) => {
      console.log('watch isShown: ', isShown);
    });

    return {
      menuState,
    };
  },
  〜略〜