[Bug Report] v-tab-item value is prefering index over value prop

[joelpro2]

Environment

Vuetify Version: 2.2.11 Vue Version: 2.6.11 Browsers: Chrome 81.0.4044.9 OS: Windows 10

Steps to reproduce

use tab items with String value as explained in documentation https://vuetifyjs.com/en/components/tabs#tab-items

Expected Behavior

tab selected should match with the value prop

Actual Behavior

tabs use index instead even with value defined

Reproduction Link

https://codepen.io/joel_rodrigues/pen/poJJxEm?editors=1011

[nekosaur]

Does it actually say that string value for value prop is supported? Am I missing it?

[joelpro2]

API <v-tab-item> Name: Value Type: Any Default: Undefined Description: Sets the value of the tab. If not provided, the index will be used.

<v-tabs-items> Name: Value Type: Any Default: Undefined Description: The designated model value for the component.

[funkindy]

Same here, no ability to manage tabs with specific values, v-model only uses index.

[ananthachetan]

Also the documentation for <v-tab> doesn't say anything about the value property.

[mr-amirganishaikh]

Not sure if it is the solution but it is working. This is also not present in documentation.

Keep :href with required value pre-pend it with # as below for v-tabs

<v-tabs v-model="activeItem" :show-arrows="false"> <v-tab v-for="(item, i) in items" :key="i" :href="'#'+item.value"> {{item.label}} </v-tab> </v-tabs>

Now set :value of v-tab-item with required key but don't mention # here

<v-tabs-items v-model="activeItem"> <v-tab-item v-for="(itemD, i) in items" :key="i" :value="itemD.value">Tab item for {{itemD.label}}</v-tab-item> </v-tabs-items>

Data used here is as below: items: [{label: 'First', value: 'first', label: 'Second', value: 'second'}]

[wglas85]

Please note, that v-list-item-group/v-list-item is the vertical component controlling v-tab-items/v-tab-item and v-list-item has a value property. Hence, adding value to v-tag complements the API for the horizontal component controlling v-tab-items/v-tab-item to be in line with the vertical component.

[jakeflorentine]

I am still seeing this issue. The value of v-tab and v-tab-item seem to be ignored in favor of index still.

[ossicoinc]

This is still an issue. Workaround doesn't work if you aren't using v-tab-items / v-tab-item elements

[naiduyanda]

the value prop is not working with both v-tab and v-tab-item

[DurtyFree]

How can this be an issue after more than 2 years :( When dynamically handling whether tabs are rendered or not, index is not a reliable key :/

[styts]

Confirming that the issue is still unresolved.

[ryanrapini]

bumping as this is still an issue.

[BayBreezy]

Yup, this is still an issue

[ghost]

This is still an issue

[joelpro2]

@nekosaur any prediction to this issue, it is parked for a while

[alessandroAmedei]

Still an issue!

[jornhd]

@joelpro2 If you replace :key="item.tab" with :href="'#${item.tab}'" (and replace ' here with `) in in your codepen https://codepen.io/joel_rodrigues/pen/poJJxEm?editors=1011, it will work as expected.

[joelpro2]

@joelpro2 If you replace :key="item.tab" with :href="'#${item.tab}'" (and replace ' here with `) in in your codepen https://codepen.io/joel_rodrigues/pen/poJJxEm?editors=1011, it will work as expected.

That looks like a really bad workaround key is a mandatory property when you're using v-for And clearly not in Vuetify docs

[ViacheslavZyrianov]

Still an issue

[naiduyanda]

No thanks

On Friday, February 17, 2023, Zyrianov Viacheslav @.***> wrote:

Still an issue

— Reply to this email directly, view it on GitHub https://github.com/vuetifyjs/vuetify/issues/10540#issuecomment-1433548265, or unsubscribe https://github.com/notifications/unsubscribe-auth/AVO72PYFPI7BECUUTZSPTSLWXZX5FANCNFSM4KS6CMYA . You are receiving this because you commented.Message ID: @.***>

-- ---------- Regards, Latchum Naidu Yanda Associate - Analyst

[x]cube LABS,

Watermark Technopark, Whitefields,

Kondapur, Hyderabad - 500084 Ph. No. 8332844265

@.*** | https://xcubeLABS.com https://xcubelabs.com/

-- If you have received this email in error please notify the sender and then delete it immediately. This message contains confidential information and is intended only for the individual(s) named. If you are not the named addressee you should not disseminate, distribute or copy this email.

[ViacheslavZyrianov]

Wow nice job! Instead of fixing an error - mark dev's comments as spam. But you know what? It still doesn't work properly!

[jornhd]

@joelpro2 If you replace :key="item.tab" with :href="'#${item.tab}'" (and replace ' here with `) in in your codepen https://codepen.io/joel_rodrigues/pen/poJJxEm?editors=1011, it will work as expected.

That looks like a really bad workaround key is a mandatory property when you're using v-for And clearly not in Vuetify docs

Sorry, my bad. But if you add :href="'#' + item.tab" in <v-tab>, and not replacing anything, it will work.

[joelpro2]

@joelpro2 If you replace :key="item.tab" with :href="'#${item.tab}'" (and replace ' here with `) in in your codepen https://codepen.io/joel_rodrigues/pen/poJJxEm?editors=1011, it will work as expected.

That looks like a really bad workaround key is a mandatory property when you're using v-for And clearly not in Vuetify docs

Sorry, my bad. But if you add :href="'#' + item.tab" in <v-tab>, and not replacing anything, it will work.

Still, you proposed the same workaround written in a different form. I mean that this should be a internal behaviour, as mentioned in Vuetify Docs

[MathieuDerelle]

but using the :href="`#${item.tab}`" syntax changes the URL

I'd like to give a value to the tabs without changing the URL, how to do that ?

[craigrileyuk]

Did this fix ever get released? Can't see it in the v2-stable branch

[MathieuDerelle]

Did this fix ever get released? Can't see it in the v2-stable branch

it is in 2.7.1 at least (with the prop tab-value)