After several searches and several attempts, I finally found a way to get the selected index from a <v-select> element in Vuetify.
But I recognize that it's not clean code, but it worked and solved my problem.
However, I would be grateful if someone could help me to simplify this thing a bit.
Here is my code:
<template>
<v-select
v-model="personSelected"
@change="getIdFromPeopleSelect"
:items="personData"
label="Select a person"
outlined>
</v-select>
</template>
<script>
export default {
name: "App",
data() {
return {
personSelected: "",
//objects inside this array was extracted from a firebase query ;-) //
personData: [
{name: "John", city: "New York"},
{name: "Mary", city: "Berlin"},
{name: "Claudia", city: "Dubai"}
]
};
},
methods: {
getIdFromPeopleSelect() {
// this could be better to get selectedIndex from v-select
return console.log(this.personData.findIndex(x => x.name=== this.personSelected));
}
</script>
Thanks a lot.