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!

My v-select items are made up of an array of objects and so my item-value is displaying the id property and item-text is displaying the name property of the object. Using a v-bind on the item-text messes with displaying the names of the objects and instead just displays [object Object] :( — SnakeyHips
Use scoped slots: stackoverflow.com/questions/50531864/… — Bennett Dams
Okay yup got it working thanks! I'll update my post with how I did it. — SnakeyHips
Please don't post the answer as part of the question. Post it as an answer. — Chenmunka

SnakeyHips SnakeyHips · Accepted Answer · 2018-09-21T07:35:20

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>

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

1 Answers