Vuetify - 收听 v-menu 激活器？

Question

我想在 v-menu 在 Vuetify 中打开时执行一些操作？我怎样才能做到这一点？我可以通过某种方式观看激活器吗？

Answer 1

谢谢 jacek，

像这样听v-menu的v-model

<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

根据 Vuetify 2.6.3，我们可以使用激活器插槽中的 'value'。这是 link

这里是link到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' },
 ],
}),
})

Vuetify - 收听 v-menu 激活器？

Vuetify - Listen for v-menu activator?

menu

vuetify.js