Prevent default click event action of Vuetify tab

Asked Oct 02 '19 at 05:01

Active Oct 02 '19 at 05:01

Viewed 2,748 times

I'm using Vuetify tab for showing some forms, I want to add a button as the last element in tab which helps to create a new tab. Now I can prevent the event bubbling to tab by using @click.stop but whenever clicked outside the button(within the v-tab) it triggering tab change event, I tried @click.prevent and @change to prevent the default action but nothing seems working. Even I tried disabled property but it disabling the entire tab including the button.

<v-tab @click.stop.prevent="addNew">
  <v-btn class="d-flex" @click.prevent.stop="addNew">Add new</v-btn>
</v-tab>

CODEPEN

asked Oct 02 '19 at 05:01

Pranav C Balan

113,687
23
165
188

Why make it a tab? You seem to be trying to make a "tab" not behave like a tab. You can make a `v-layout` with the tabs and then place the button _outside_ of the tabs. – Michael Oct 02 '19 at 05:12
1

@Michael let me try – Pranav C Balan Oct 02 '19 at 05:16
1

@Michael : another workaround - https://codepen.io/pranavcbalan/pen/YzKmZzd – Pranav C Balan Oct 02 '19 at 05:19
@Michael : thanks man, https://codepen.io/pranavcbalan/pen/LYPwWEB – Pranav C Balan Oct 02 '19 at 05:24

Prevent default click event action of Vuetify tab

0 Answers0