How can I get object when select autocomplete vuetify?

Question

My code is like this :

<div id="app">
  <v-app id="inspire">
    <div>
      <v-autocomplete
        label="Clubs"
        :items="clubs"
        item-text="name"
        v-model="selectedClub"
      ></v-autocomplete>
    </div>
    <v-btn text color="primary" @click="submit">OK</v-btn>
  </v-app>
</div> 

Demo is this : https://codepen.io/positivethinking639/pen/GRRNzVE?&editable=true&editors=101

If submit method called, it display name selected. for example : mu

You can see in the console.log

I want if submit method called, it display object in array. So I get id and name

how can i do it?

Answer 1

You can get the selected value in object form by using return-object property in vuetify

Lets say , your select box has values [ {name: 'name1', id: 1}, {name: 'name2', id: 2}]

     <v-autocomplete
        label="Clubs"
        :items="clubs"
        item-text="name"
        v-model="selectedClub"
      ></v-autocomplete>

If you use the above code you get only value from "name" property

     <v-autocomplete
        label="Clubs"
        :items="clubs"
        item-text="name"
        item-value="id"
        v-model="selectedClub"
      ></v-autocomplete>

If you use the above code, you get value from "id" property

     <v-autocomplete
        label="Clubs"
        :items="clubs"
        item-text="name"
        item-value="id"
        return-object
        v-model="selectedClub"
      ></v-autocomplete>

If you use the above code, you get the selected value as object

Find the working code pen here: https://codepen.io/chansv/pen/YzzpMob?editors=1010