vue.js - 未显示 Vuetfiy 选项卡

问题描述

我试图为我的组件实现选项卡。无法显示选项卡。我从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>

我的应用程序.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>

标签： vue.jsvuetify.js

vue.js - 未显示 Vuetfiy 选项卡

问题描述

解决方案

推荐阅读