CODEWITHSUNDEEP
vue.jsvuetify.js
Mahdi Safari
Mahdi Safari

Reputation: 298

vuetify How to set content to tabs v-tabs-items

I am new with vuetify, I want to set two Tables to vuetify.js tabs but when I set two tables into tabs show me only one table and doesn't change content. what is wrong with my code. thanks.

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

Upvotes: 2

Views: 9582

Answers (1)

Yurii Semeniuk
Yurii Semeniuk

Reputation: 943

You don't need to bind v-tab-item's value to the subscribe and contact properties, but set v-tab-item's value to be a plain string "subscribe" and "contact".

Just remove colon in front of :value

Here is the Codepen

Upvotes: 6

Related Questions