如何处理 Vuetify 中 v-menu 的点击事件？答案

【问题标题】：How do I handle the click event of a v-menu in Vuetify?如何处理 Vuetify 中 v-menu 的点击事件？
【发布时间】：2019-10-16 14:28:36
【问题描述】：

如何在 Vuetify 中检查和处理 v-menu 的点击事件？

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

最好的方法是在 v-menu 上使用 v-model 并观察变量变化。

HTML

  <v-menu
    v-model="isOpened">
  </v-menu>

脚本

export default({
   watch:{
    isOpened: function(){
      // do whatever you want
    } 
  }
})

【讨论】：

【解决方案2】：

这是一个例子：

<template v-slot:activator="{ on: { click } }">
  <v-btn @click="(click) (exit=!exit)" icon>
    <v-icon v-if="!exit">mdi-dots-vertical</v-icon>
    <v-icon v-else>mdi-close</v-icon>
  </v-btn>
</template>

如您所见，如果单击菜单，则退出变量将设置为相反的值，因此按钮上会显示mdi-close 图标。如果再次单击菜单，将再次触发更改退出变量的事件，并显示垂直点。

我发布这个问题只是为了为自己保存确切的语法以供以后使用，因为我已经研究了几个小时的 Vuetify 文档并最终弄清楚了如何去做。

【讨论】：

但是退出变量声明在哪里？
在这个特定的例子中，它只是在脚本标签中声明，默认值为'false'。
好的，但是让我们说exit=false，&当用户点击按钮时退出为真，但当用户点击v-menu外部（不是按钮）时，菜单将被隐藏& exit 仍然是 true，这意味着它没有同步。在这种情况下，此逻辑将在此处失败。如果我错了，请标记我。