Vuetify get selected index from <v-select>

Viewed 2997

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.

1 Answers

If the reason for getting the index is to then get the object correlating to the selection, the better way is to use the return-object prop.

Also use item-text to specify the name field.

You can remove the change listener as personSelected will contain the object.

<v-select
  v-model="personSelected"
  :items="personData"
  item-text="name"
  label="Select a person"
  return-object
  outlined>
</v-select>
Related