1

我正在使用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()匹配，相应的选项卡仍然没有设置为活动。

看过Vuetify: How to preselect active tab? 但没有一个答案有效。

更新

再看一遍后发现active_tab: `${route().current()}`,总是设置为错误的 URL。例如，当在 invoices 路由上时，它仍然返回项目的 url。所以它与ziggy有关。

4

2 回答 2

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>

重要的部分是：

  • 设置一些返回选项卡 ID 的计算属性（:value在本例中为`）<v-tabs>tab1
  • 在每个选项卡上设置:to为单击时重定向
  • 设置v-model为<v-tabs-items>指向同:value一个<v-tabs>
  • 设置value到<v-tab-item>每个选项卡 ID（tab1在本例中）
于 2021-06-10T13:23:49.637 回答
0

看起来在对象中设置equal to的v-model属性可以解决它。v-tabswindow.location.hrefdata

于 2020-07-23T14:59:53.360 回答