4

I have problem with vuetify tabs. Everything works fine, but when I add exact parameter to v-tab the bottom bar animation stops working. Tabs display correctly but v-tabs-slider-wrapper position isn't updated.

Without exact parameter is ok.

How do I fix this animation?

routes.js

{
    path: "/course",
    component: Course,
    children: [
        {
            path: "",
            component: CourseDetails,
            name: "courseDetails"
        },
        {
            path: "lessons",
            component: CourseLessons,
            name: "courseLessons"
        },
        {
            path: "reviews",
            component: CourseReviews,
            name: "courseReviews"
        },
    ]
},

Course.vue

<template>
  <v-container fluid>
    <v-row>
      <v-col>
        <v-tabs v-model="activeTab" grow>
          <v-tab to="/course" exact>Details</v-tab>
          <v-tab to="/course/lessons" exact>Lessons</v-tab>
          <v-tab to="/course/reviews" exact>Reviews</v-tab>
        </v-tabs>
      </v-col>
    </v-row>

    <v-row>
      <v-col cols="12">
        <router-view></router-view>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>

  export default {
    name: "Course",
  
    data: () => ({
      activeTab: null
    })
  };

</script>
Lidia K.
  • 209
  • 3
  • 13

0 Answers0