Open v-select options on button click

Question

I am looking for a way to open vuetify v-select component when clicking on an icon button. The v-select should not been seen when its closed, Only when opened by clicking on the button. Its like sort of having The button toggling the state of the v-select

The purpose its to filter columns to show on data-table, And the reason i want it to be hidden by default its because i already have an v-select component at the table toolbar to select data to show.

I only have this is my relevant code, I don`t have any other idea how to continue from here

 <v-btn small icon>
      <v-icon>
        mdi-pencil
          <v-select :items="headers"></v-select>
      </v-icon>
 </v-btn>

Answer 1

Here's a solution: 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 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 a sample demo with <v-data-table/> implementation.