CODEWITHSUNDEEP
javascriptvue.jsvue-componentvuetify.jsvue-router
Milano
Milano

Reputation: 18725

Vuetify tabs with router - tab.isActive is always false

I'm trying to implement Vuetify v-tabs with router so each tab is on different url. The problem is that no table is getting activated. Everything seems to be working but I don't see any content and I noticed that no tab has isActive===true

This is a wrapping component:

<template>
  <v-tabs
      v-model="tab"
      background-color="transparent"
      color="basil"
      grow
      exact
  >
    <v-tab
        key="products-update"
        :to="{name:'products-update'}"
    >
      Update
    </v-tab>
    <v-tab
        key="products-gallery"
        :to="{name:'products-gallery'}"
    >
      Gallery
    </v-tab>
    <v-tab
        key="products-preview"
        :to="{name:'products-preview'}"
    >
      Preview
    </v-tab>

  <v-tab-item key="products-update" value="products-update">
    UPDATE
    <router-view></router-view>
  </v-tab-item>

  <v-tab-item key="products-gallery" value="products-gallery">
    GALLERY
    <router-view></router-view>
  </v-tab-item>

  <v-tab-item key="products-preview" value="products-preview">
    PREVIEW
    <router-view></router-view>
  </v-tab-item>
  </v-tabs>
</template>

<script>
import productForm from "@/components/dashboard/product/productForm";
import productGalleryForm from "@/components/dashboard/product/productGalleryForm"
import productPreview from "@/components/dashboard/product/productPreview";
import router from '@/router/index'

export default {
  name: "DashboardProductLife",
  components: {
    productForm,
    productGalleryForm,
    productPreview,

  },
  computed: {

  },
  data(){
    return {
      tab:null,
    }
  }
}
</script>

<style scoped>

</style>

And this is routes:

    ...
 {
        path: '/products/detail',
        name: 'products-detail',
        component: () => import(/* webpackChunkName: "dashboard" */ '@/pages/dashboard/DashboardProductLife'),
        children: [
            {
                path: '/products/detail/create',
                name: 'products-create',
                component: () => import(/* webpackChunkName: "dashboard" */ '@/pages/dashboard/DashboardProductForm.vue'),
            }, {
                path: '/products/detail/update/:id',
                name: 'products-update',
                component: () => import(/* webpackChunkName: "dashboard" */ '@/components/dashboard/product/productForm'),
            }, {
                path: '/products/detail/gallery/:id',
                name: 'products-gallery',
                component: () => import(/* webpackChunkName: "dashboard" */ '@/components/dashboard/product/productGalleryForm'),
            }, {
                path: '/products/detail/preview/:id',
                name: 'products-preview',
                component: () => import(/* webpackChunkName: "dashboard" */ '@/components/dashboard/product/productPreview'),
            },
        ]
    }
    ...

Do you know why it isn't working? I also appreciate a better solution.

Upvotes: 0

Views: 322

Answers (1)

Vladimir Vladimirov
Vladimir Vladimirov

Reputation: 319

I think the idea of v-tabs is to use it as tabs and not as navigation but try putting the "to" attribute in a "router-link" and not in the "v-tab" as follows:

<v-tab
    key="products-update"
>
  <router-link to='/products-update'>Update</router-link>
</v-tab>

Upvotes: 1

Related Questions