[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 :/

[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

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