How to trigger Vuetify component activator on arbitrary element click?-CodePudding

I'm trying to open a little popup floating menu when an element is clicked with Vuetify (2.5.0) and Vue (2.6.12) e.g.

<v-menu bottom offset-y>
  <template v-slot:activator="{ on, attrs }">
    <div v-bind="attrs" v-on="on"></div>
  </template>
  <div>My popup floating content..</div>
</v-menu>

...but I'm not sure how the activator should work with the click event. I'm not using v-btn as the activator for a reason. The vuetify docs give examples, but they always use v-btn e.g. instead of the div in the activator slot above, it's <v-btn v-bind="attrs" v-on="on">A Menu</v-btn>.

CodePudding user response：

You could destruct the on slot prop to get the click event and then use it in your div :

<v-menu bottom offset-y>
  <template v-slot:activator="{ on:{click}, attrs }">
    <div v-bind="attrs" @click="click">show menu</div>
  </template>
  <div>My popup floating content..</div>
</v-menu>