Answer a question

How can I check and handle the click event of a v-menu in Vuetify?

Answers

Here is an example:

<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>

As you can see, if the menu is clicked the exit var is set to its opposite value and therefore the mdi-close icon is shown on the button. If the menu is clicked again, the event changing the exit variable will trigger again and the vertical dots will be shown.

I only posted this question to save the exact syntax for myself for later because I have been digging Vuetify docs for hours and finally figured out how to do it.

Logo

Vue社区为您提供最前沿的新闻资讯和知识内容

更多推荐