vuetifyjs3vuetify-tabs

How to disable swipe in VTabs component in Vuetify 3?


I am using <v-tabs> component with a couple of tabs and want to disable the swipe functionality.

In Vuetify 2 this was done using the touchless prop on <v-tabs-items> but this option does not exist in Vuetify 3 as V3 no longer uses the <v-tabs-items> wrapper.

Is there another way I can disable this for the tabs or even the entire card or the window containing the tabs?

My code is as follows:

<v-card>
  <v-tabs v-model="twoTabs">
    <v-tab value="tab1">Tab One</v-tab>
    <v-tab value="tab2">Tab Two</v-tab>
  </v-tabs>
  <v-window v-model="twoTabs">
    <v-window-item value="tab1">
      <v-card>
        <v-card-text>Tab One Text</v-card-text>
      </v-card>
    </v-window-item>
    <v-window-item value="tab2">
      <v-card>
        <v-card-text>Tab Two Text</v-card-text>
      </v-card>
    </v-window-item>
  </v-window>
</v-card>

Solution

  • Just add prop disabled on v-window. See below example:

    <v-window disabled v-model="twoTabs">
       ...
    </v-window>
    

    More info see the doc here.