Vuetify-听v菜单激活器吗?

时间:2020-01-03 12:24:09

标签: menu vuetify.js

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

1 个答案:

答案 0 :(得分:0)

谢谢雅克,

像这样聆听v菜单的v模型。

<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