Vuetify - Listen for v-menu activator?

Question

I would like to do some actions when the v-menu is opened up in Vuetify? How can I do that? Can I watch the activator somehow?

Answer 1

Thank you jacek,

Listen to the v-model of the v-menu like this.

<template>
  <div class="text-center">
    <v-menu offset-y v-model="menu_model">
      <template v-slot:activator="{ on }">
        <v-btn color="primary" dark v-on="on">{{ buttonText }}</v-btn>
      </template>
      <v-list>
        <v-list-item v-for="(item, index) in items" :key="index">
          <v-list-item-title>{{ item.title }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-menu>
  </div>
</template>

<script>
export default {
  data: () => ({
    items: [
      { title: "Click Me" },
      { title: "Click Me" },
      { title: "Click Me" },
      { title: "Click Me 2" }
    ],
    menu_model: "",
    buttonText: "Click to open menu"
  }),
  watch: {
    menu_model(menu_open) {
      if (menu_open === true) {
        this.buttonText = "Menu Open";
      } else {
        this.buttonText = "Click to open menu";
      }
    }
  }
};
</script>

CodePen

Answer 2

As per Vuetify 2.6.3, we can make use of 'value' from activator slot. Here is the link

Here is the link to Codepen

<template>
<div id="app">
<v-app id="inspire">
<div class="text-center">
  <v-menu offset-y v-model="menu_model">
    <template v-slot:activator="{ on, value }">
      <v-btn
        color="primary"
        dark
        v-on="on">
        {{ value ? 'Click to open menu' : 'Menu Open' }}
      </v-btn>
    </template>
    <v-list>
      <v-list-item
        v-for="(item, index) in items"
        :key="index">
        <v-list-item-title>{{ item.title }}</v-list-item-title>
      </v-list-item>
     </v-list>
   </v-menu>
  </div>
 </v-app>
 </div>
</template>

<script>
new Vue({
 el: '#app',
 vuetify: new Vuetify(),
data: () => ({
 items: [
  { title: 'Click Me' },
  { title: 'Click Me' },
  { title: 'Click Me' },
  { title: 'Click Me 2' },
 ],
}),
})