3

我对vuetify tabs有问题。一切正常,但是当我向 v-tab 添加确切参数时,底栏动画停止工作。选项卡正确显示,但 v-tabs-slider-wrapper 位置未更新。

没有确切的参数是可以的。

如何修复此动画?

路由.js

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

课程.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>
4

0 回答 0