Как настроить вкладки Vuetify для активных на основе URL - PullRequest
Новая
       27

Как настроить вкладки Vuetify для активных на основе URL

0 голосов
/ 05 февраля 2020

Я использую vue 2.6.11, vuetify 2.2.9 и ziggy 0.8.1. Для вкладок Vuetify у меня есть следующее: 

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

В зависимости от местоположения route().current() он возвращает другое значение. В <template> возвращается полный URL-адрес, а в <script> возвращается только Laravel имя маршрута. Проблема в том, что несмотря на то, что клавиша и route().current() совпадают, соответствующая вкладка по-прежнему не активна.

Посмотрел Подтвердить: Как предварительно выбрать активную вкладку? , но ни один из ответов не работает.

Обновление

После если посмотреть на это еще раз, то выясняется, что active_tab: `${route().current()}`, всегда имеет неправильный URL. Например, когда на маршруте счетов-фактур он все еще возвращает URL для проекта. Так что это связано с зигги.

...