Exploring Vuetify for the first time, I'm encountering an issue with obtaining the index of a selected option on the v-select component.
My goal is to populate a text field based on the option that is clicked once I have the index.
I am fetching an array of objects from firebase and passing it as the :items prop.
While I can successfully retrieve the index using a standard select option with v-for to iterate through the array and then using @change to call a function that extracts the selectedIndex from the event object, I am struggling to achieve the same result using the v-select component.
The following code snippet works for me:
<select @change="populateLicense" v-model="trim.shop">
<option value="">Select Shop</option>
<option v-for="item in shopdata" :key="item.id">
{{ item.shopname}}
</option>
</select>
Corresponding Method:
populateLicense(e) {
let index = e.target.selectedIndex - 1
this.trim.license = this.shopdata[index].license
},
However, the current v-select component implementation (which is not working) is as follows:
<v-select
outline
label="Select Shop"
:items="shopdata"
item-text="shopname"
item-value=""
v-model="trim.shop"
@change="populateLicense"
>
</v-select>
I believe the item-value property might hold the solution, but I am uncertain about what value it should be assigned.
Any assistance on this matter would be greatly appreciated. Thank you!