Is there a way to get the index of a selected v-select option in Vuetify?

Question

I'm new to Vuetify and am having some trouble retrieving the index of a selected option on the v-select component.

Once I have the index, I'd like to populate a text field based on the option clicked.

I have an array of objects that I'm retrieving from firebase and passing in as the :items prop.

I can successfully get the index using a standard select option with v-for to loop through the array, then use @change to call a function that uses the event object to get the selectedIndex. However, I can't seem to figure it out when trying to use the v-select component

This works:

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

Methods:

populateLicense(e) {
    let index = e.target.selectedIndex - 1
    this.trim.license = this.shopdata[index].license
},

Current v-select component (Not working):

<v-select 
    outline 
    label="Select Shop" 
    :items="shopdata" 
    item-text="shopname" 
    item-value="" 
    v-model="trim.shop"
    @change="populateLicense"
>
</v-select>

I'm guessing the item-value might provide what I need, but I'm not sure what I'm supposed to assign to it

Any help is greatly appreciated, thanks!

Answer 1

Was able to solve it after looking at vuetify docs again. Passing the return-object prop was the key.

Updated code for anyone who may have a similar problem!

v-select:

<v-select 
    outline 
    label="Select Shop" 
    :items="shopdata" 
    item-text="shopname" 
    v-model="trim.shop"
    return-object
    @change="populateLicense(trim.shop.license)"
>
</v-select>

Methods:

methods: {
    populateLicense(license) {
        this.trim.license = license
     }
}

Answer 2

this.shopdata.findIndex(data => data === this.trim.shop)

remove

 item-text="shopname" 
 item-value="" 

Answer 3

You can set id in your v-select ... And do this: document.getElementById("mySelect").selectedIndex

Is it what you need?