Vuetify - how to easily access v-select item-text value?

Question

I was wondering how I could easily access the item-text value of a v-select when items have been bound to it and it is separate from the item-value value? I wish to save the item-value value to my v-model but then also pass the item-text value through an on change event like so:

<v-select v-model="id" :items="items" item-value="id" item-text="name" v-on:change="getItemText(name)" />

I can get the value if I put on a ref to the v-select and then access it via:

this.$refs.vselect.selectedItems[0].name;

but that seems a bit long winded when the data is in the v-select itself.If anyone knows an easier way of doing this I'd love to hear it!

Thanks!

Answer 1

Got it working using slots thanks to @Bennett Dams.

<v-select v-model="id" :items="items" item-value="id" item-text="name">
<template slot="item" slot-scope="data" >
  <v-list-tile-content>
    <v-list-tile-title @click="getItemText(data.item.name)" v-html="data.item.name"></v-list-tile-title>
  </v-list-tile-content>
</template>

Answer 2

You can do that by using return-object in your v-select like below:

<v-select
      :items="items"
      label="My Items"
      item-text="name"
      return-object
      v-model="selectedItem"
      @change="onItemChange"
      dense
></v-select>


onItemChange(item){
   console.log(item);
}