Question

我试图对我的组件实施制表符。标签无法显示。我从https://vuetifyjs.com/en/components/tabs TypeError: this.$parent.addTab is not a function采取了相同的示例，错误已登录到控制台。我升级了vuetify版本，但无法正常工作。可能是什么问题呢？组件内容如下。

<template><div>
    <v-tabs v-model="active"
            color="cyan"
            dark
            slider-color="yellow">
        <v-tab v-for="n in 3"
               :key="n"
               ripple>
            Item {{ n }}

        </v-tab>
        <v-tab-item v-for="n in 3"
                    :key="n">
            <v-card flat>
                <v-card-text>{{ text }}</v-card-text>
            </v-card>
        </v-tab-item>
    </v-tabs>

    <div class="text-xs-center mt-3">
        <v-btn @click="next">next tab</v-btn>
    </div>
</div></template>

<script>
export default {
    data() {
        return {
            active: null,
            text: 'Lorem ipsum'
        }
    },
    methods: {
        next() {
            const active = parseInt(this.active)
            this.active = (active < 2 ? active + 1 : 0)
        }
    }
}</script>

我的app.vue：

<v-app id="inspire">
    <v-navigation-drawer persistent clipped enable-resize-watcher v-model="drawer" app>
        <MenuComponent></MenuComponent>
    </v-navigation-drawer>
    <v-toolbar color="cyan darken-3" dark fixed clipped-left app>
        <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
        <v-toolbar-title>...</v-toolbar-title>
        <v-spacer></v-spacer>

        <v-btn @click="logout" icon>
            <v-icon>exit_to_app</v-icon>
        </v-btn>
    </v-toolbar>
    <main>
        <v-content>
            <vue-snotify></vue-snotify>
            <v-container fluid>
                <router-view></router-view>
            </v-container>
        </v-content>
    </main>
    <v-footer color="cyan darken-3" app fixed>
        <span class="white--text"> &copy; 2018 </span>
    </v-footer>
</v-app>

Answer 1

我发现了问题。我已经导入了vue-nav-tabs。我删除了它，现在它可以工作了。

Answer 2

我花了一点时间才意识到您不需要 href 例如

 <v-tabs
  v-model="tabs"
  background-color="deep-purple accent-4"
  centered
  dark
  icons-and-text
>
  <v-tabs-slider></v-tabs-slider>


  <v-tab href="#tab-2">
    Favorites
    <v-icon>mdi-heart</v-icon>
  </v-tab>

  <v-tab href="#tab-3">
    Nearby
    <v-icon>mdi-account-box</v-icon>
  </v-tab>
</v-tabs>

<v-tabs-items v-model="tabs">
  <v-tab-item
   
  >
    <v-card flat>
      <v-card-text><p>hey</p></v-card-text>
    </v-card>
  </v-tab-item>
        <v-tab-item
   
  >
    <v-card flat>
      <v-card-text> <p>hey</p></v-card-text>
    </v-card>
  </v-tab-item>
</v-tabs-items>

删除 href="#tab-2" 和 href="#tab-3" 有效，因为如果您不一定需要在 v-tab-item 中设置值，我还没有设置该值。

 <v-tab-item
        v-for="i in 3"
        :key="i"
        :value="'tab-' + i"
      >

不显示Vuetfiy标签

2 个答案: