[Vuejs]-How to set Vuetify tabs to active based on url

by

-2👍

✅

Looks like that setting the v-model attribute of v-tabs equal to window.location.href in the data object solves it.

👤SuperDJ

1👍

<v-tabs :value="tab_value_in_url">
   <v-tab :to="/pages/tab1">Tab 1</v-tab>
</v-tabs>

<v-tabs-items v-model="tab_value_in_url">
      <v-tab-item value="tab1">...</v-tab-item>
</v-tabs-items>

The important parts are:

  • set :value on <v-tabs> to some computed property that returns the tab ID (tab1 in this example`)
  • set :to on each tab to redirect when clicked
  • set v-model on <v-tabs-items> to point to the same :value on <v-tabs>
  • set value on <v-tab-item> to each tab ID (tab1 in this example)
👤d-_-b

Leave a comment