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] :( — soupjake, Sep 20 '18 at 13:44
Use `scoped slots`: https://stackoverflow.com/questions/50531864/customizing-item-text-in-v-select — Bennett Dams, Sep 20 '18 at 13:53
Okay yup got it working thanks! I'll update my post with how I did it. — soupjake, Sep 20 '18 at 14:16
Possible duplicate of [Customizing item-text in v-select](https://stackoverflow.com/questions/50531864/customizing-item-text-in-v-select) — Toodoo, Sep 20 '18 at 17:13
Please don't post the answer as part of the question. Post it as an answer. — Chenmunka, Sep 20 '18 at 17:15

score 1 · Answer 1 · edited Aug 15 '19 at 10:44

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>

edited Aug 15 '19 at 10:44

jdlm

6,327
5
29
49

answered Sep 21 '18 at 07:35

soupjake

3,293
3
17
32

score 0 · Answer 2 · answered Jun 06 '22 at 11:48

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);
}

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

2 Answers2