Vuetify: [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.

[shaikhamir]

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'}]