Vuetify [v-select] trigger when menu is opened

Question

I need help trying to detect the moment when the menu in a select is being opened and shown to the users.

Is there any method or watch that i can use to trigger the moment when the menu is being displayed?

Here a simple codepen with a v-select.

codepen.io/xmorelll/pen/bGMppWO?editors=101

Thank you!

Answer 1

Did you try @click event, it is fired when the menu is clicked/opened

Answer 2

I found this solution extending the VSelect component from vuetify:

import { VSelect } from 'vuetify/lib'

export default {
    extends: VSelect,
    watch: {
        isMenuActive(val) {
            this.$emit('openMenu', val);
        }
    }
}

With this component the VSelect will do an emit when the menu changes his status

Answer 3

Create a variable (which is named toggleSelect in this example) that will control the visibility of the <v-select/> and its <v-menu/> (the dropdown options). <v-select/> has menu-props which we can use to control the menu's visibility. For the select field, we can simply use v-if to hide it.

<v-btn 
  ...
  @click="toggleSelect = !toggleSelect"
>
  <v-icon>mdi-pencil</v-icon>
</v-btn>
<v-select
  :items="headers"
  v-if="toggleSelect"
  :menu-props="{value: toggleSelect}"
/>

data: () => ({
  headers: [...],
  toggleSelect: false,  // let's not show the <v-select/> at first load.
})

Here is an example demo with <v-data-table/> implementation.