CODEWITHSUNDEEP
vuetify.js
d-_-b
d-_-b

Reputation: 23181

Vuetify Menu in header slot of data-table

I'm trying to put a <v-menu> within the header slot of a <v-data-table>.

This menu would then show filter options (v-autocomplete) for that column.

When the menu is clicked, I can't click the autocomplete to show its items, because then the menu closes.

Is this not possible in Vuetify?

I've tried passing :close-on-click="false" and :close-on-content-click="false"

For example (CodePen):

<v-data-table :items="desserts" :headers="headers">
  <template #[`header.calories`]>      
    <v-menu top>
      <template v-slot:activator="{ on, attrs }">
        <v-btn icon v-bind="attrs" v-on="on"><v-icon>filter</v-icon></v-btn>
      </template>
      <v-autocomplete class="black" :items="headers" />
    </v-menu>
  </template>
</v-data-table>

Upvotes: 0

Views: 260

Answers (1)

Arslan Butt
Arslan Butt

Reputation: 795

You can use Event.stopPropagation(), it will prevents further propagation of the current event

Eg:

<v-autocomplete @click="clickOnAutocomplete" class="black" :items="headers" />
...
 methods: {
    clickOnAutocomplete(e) {
      e.stopPropagation();
    },
  }
....

Upvotes: 1

Related Questions