Vuetify Deselecting v-tabs

user_1572330 0
Viewed 2668

I'm trying to deselect the v-tabs component through code but it always ends up selecting the first tab.

When the v-model is set to -1 it's deselected on init but once any tab has been selected there seems to be no way to deselect. Any other value than one of the tabs will just select the first tab and set the index to 0. (v-model and value have the same result)

Here is a CodePen example: https://codepen.io/arno-van-oordt/pen/qBBbmzY

  • The index starts at -1
  • Click tab 2 or 3 on either of the tab bars
  • Click "Deselect"

HTML: 

<div id="app">
  <v-app id="inspire">
    tabIndex: {{tabIndex}}
    <v-tabs :value="tabIndex">
      <v-tab>Item One</v-tab>
      <v-tab>Item Two</v-tab>
      <v-tab>Item Three</v-tab>
    </v-tabs>
    <v-tabs v-model="tabIndex">
      <v-tab>Item One</v-tab>
      <v-tab>Item Two</v-tab>
      <v-tab>Item Three</v-tab>
    </v-tabs>
    <v-btn @click="deselect">Deselect</v-btn>
  </v-app>
</div>

JS:

new Vue({
  el: "#app",
  vuetify: new Vuetify(),

  data: {
    tabIndex: -1
  },
  methods: {
    deselect: function() {
      this.tabIndex = -1;
    }
  }
});

Is this a bug or am I missing something here?

vuetify.js vue.js
2 Answers

First tab is autoselected.
A workaround : Add fake first tab with <v-tab class="pa-0 ma-0" style="min-width:0px" /> and a first empty tab item <v-tab-item />

user_48669640

The problem is that for the v-tabs component, the first tab (with index 0) is selected by default. With the version of Vuetify I'm using currently (2.2.22), I could not reproduce the initial state you described with the v-model set as -1, it still selected the first tab.

To solve your problem, you can use the optional prop defined for <v-tabs>, which does not require an active tab. When no tab is selected, the v-model is undefined:

<v-tabs
  optional
  ...
>
  ...
</v-tabs>
user_82381290
Related