Question

我是vuetify的新手，我想为vuetify.js选项卡设置两个表，但是当我将两个表设置为选项卡时，仅显示一个表并且不会更改内容。我的代码有什么问题。谢谢。

<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>

Answer 1

您不需要将v-tab-item的{{1}}绑定到value和subscribe属性，而是设置contact的{{1} }设为纯字符串“ subscribe”和“ contact”。

只需移除v-tab-item前面的冒号

这里是Codepen

vuetify如何将内容设置到选项卡v-tabs-items

1 个答案: