Vuetify的v-tabs选项卡切换不起作用

vue3,vuetify版本为3.4.1

想要用vuetify中的v-tabs来做选项卡切换 https://vuetifyjs.com/zh-Hans/components/tabs/

官方代码示例效果:

我把官方代码copy下来的效果是这样:

控制台会报警告:

[Vue warn]: Failed to resolve component: v-tabs-window-item
DWZXView.vue:80 [Vue warn]: Failed to resolve component: v-tabs-window

然后在github仓库的这个issue( https://github.com/vuetifyjs/vuetify/issues/20017 ) 中找到了问题,确实是官方示例的问题,只需要将v-tabs-window改成v-window,将v-tabs-window-item改成v-window-item即可,正确的示例如下:

<v-card>
    <v-tabs
        v-model="tab"
        bg-color="primary"
        >
        <v-tab value="one">Item One</v-tab>
        <v-tab value="two">Item Two</v-tab>
        <v-tab value="three">Item Three</v-tab>
    </v-tabs>

    <v-card-text>
        <v-window v-model="tab">
            <v-window-item value="one">
            One
            </v-window-item>

            <v-window-item value="two">
            Two
            </v-window-item>

            <v-window-item value="three">
            Three
            </v-window-item>
        </v-window>
    </v-card-text>
</v-card>

!!!别忘了定义tab

posted @ 2024-12-17 10:17  junlin623  阅读(14)  评论(0编辑  收藏  举报