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
你只管出发,旅途自有风景~~