Vue.js vuetify如何将内容设置为选项卡v-tabs-items
我是vuetify新手,我想将两个表设置为vuetify.js选项卡,但当我将两个表设置为选项卡时,只显示一个表,不会更改内容。我的代码有什么问题。谢谢Vue.js vuetify如何将内容设置为选项卡v-tabs-items,vue.js,vuetify.js,Vue.js,Vuetify.js,我是vuetify新手,我想将两个表设置为vuetify.js选项卡,但当我将两个表设置为选项卡时,只显示一个表,不会更改内容。我的代码有什么问题。谢谢 <v-card> <v-tabs v-model="tab" background-color="deep-purple accent-4"
<v-card>
<v-tabs v-model="tab"
background-color="deep-purple accent-4"
centered
dark
icons-and-text>
<v-tabs-slider></v-tabs-slider>
<v-tab href="#subscribe">
Subscribe
<v-icon>mdi-phone</v-icon>
</v-tab>
<v-tab href="#contact">
Contact
<v-icon>mdi-heart</v-icon>
</v-tab>
</v-tabs>
<v-tabs-items v-model="tab">
<v-tab-item
:key="1"
:value="subscribe">
<v-card flat>
<v-card-text>
<v-data-table ....></v-card-text>
</v-card>
</v-tab-item>
<v-tab-item
:key="2"
:value="contact">
<v-card flat>
<v-card-text> <v-data-table ...></v-card-text>
</v-card>
</v-tab-item>
</v-tabs-items>
</v-card>
订阅
mdi电话
接触
心脏
您不需要将v-tab-item
的值
绑定到subscribe
和contact
属性,而是将v-tab-item
的值设置为纯字符串“subscribe”和“contact”
只需删除:value前面的冒号
这是请添加的代码并显示数据部分。谢谢,我想强调有必要通过这种方式将href
prop添加到v-tab
,`:href=“'#'+tabName”`,否则tab
将默认使用索引,而不是字符串值。