v-tabs-window-item shows content of the tab clicked + other content

[Acenollari]

I am using the v-tabs-window-item component from Vuetify, but I’m facing an issue. When I click on the first tab, it shows the content of the first tab, but below it, the content of other tabs is also displayed. Here is the code I’m using (inside the v-tab-window-item i have different content):

<v-tabs v-model-“tab” bg-color-“#2e76bc” color-“white”>
<v-tab v-for-“item in tabItems” :key=”item”>ff item )X</
v-tab>
</v-tabs>
<v-tabs-window v-model=”tab”>
<v-tabs-window-item>
</v-tabs-window-item>
<v-tabs-window-item>
</v-tabs-window-item>
<v-tabs-window-item>
</v-tabs-window-item>
<v-tab-window-item>
</v-tab-window-item>
<v-tab-window-item>
</v-tab-window-item>
</v-tabs-window>

• This topic was modified 4 months, 1 week ago by Acenollari.

[Acenollari]

Solution:

The issue occurs due to a typo in the code. While VS Code does not highlight this as a syntax error, a closer look reveals that only one of the <v-tabs-window-item> elements is correctly used. The other elements incorrectly use the tag <v-tab-window-item>. These incorrectly used tags display their content at all times, causing the content of other tabs to appear below the first tab’s content.

Here is the corrected code:

<v-tabs v-model=”tab” bg-color=”#2e76bc” color=”white”>
<v-tab v-for=”item in tabItems” :key=”item”>{{ item }}</v-tab>
</v-tabs>

<v-tabs-window v-model=”tab”>
<v-tabs-window-item></v-tabs-window-item>
<v-tabs-window-item></v-tabs-window-item>
<v-tabs-window-item></v-tabs-window-item>
</v-tabs-window>

[Author]

Posts