How to set Vuetify tabs to active based on url

Question

I'm using vue 2.6.11, vuetify 2.2.9 and ziggy 0.8.1. For the Vuetify tabs I have the following:

<template>
    <v-tabs
        background-color="transparent"
        slider-color="secondary"
        icons-and-text
        dark
        :value="`${route().current()}`"
        v-model="active_tab"
    >
        <v-tab
            :href="route('project.projects.show', $page.project.id)"
            link
            exact
            key="project.projects.show"
        >
            Project
        </v-tab>

        <v-tab
            :href="route('project.projects.company', $page.project.id)"
            link
            exact
            key="project.projects.company"
        >
            Company
        </v-tab>

        <v-tab
            :href="route('project.invoices.index', $page.project.id)"
            link
            exact
            key="'project.invoices.index"
        >
            Invoices
        </v-tab>
    </v-tabs>
</template>

<script>
export default {
    data()
    {
        return {
            active_tab: `${route().current()}`,
        }
    },
}
</script>

Depending on the location of route().current() it returns a different value. In the <template> it returns the full URL and in the <script> it only returns the Laravel route name. The problem is even though the key and route().current() match, the corresponding tab still isn't set to active.

Have looked at Vuetify: How to preselect active tab? but none of the answers work.

Update

After looking at it some more it turns out that active_tab: `${route().current()}`, is always set to wrong URL. For example when on the invoices route it still returns the url for the project. So it is related to ziggy.

Have you tried to use a computed property for `active_tab` ? — IVO GELOV, Feb 05 '20 at 08:22
@IVOGELOV tried it but doesn't work either. But what would it add compared to setting it directly or during `mounted()`? — SuperDJ, Feb 05 '20 at 08:34
You can try to use Vue-router - it should be more robust than `ziggy` — IVO GELOV, Feb 05 '20 at 08:55
@IVOGELOV I'm using Ziggy because I'm also using inertiajs which make security a lot easier. — SuperDJ, Feb 05 '20 at 08:57

score 1 · Answer 1 · answered Jun 10 '21 at 13:23

<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)

score -2 · Accepted Answer · answered Jul 23 '20 at 14:59

-2

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

answered Jul 23 '20 at 14:59

SuperDJ

7,488
11
40
74

How to set Vuetify tabs to active based on url

2 Answers2