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

vue.js vuetify.js v-select
SnakeyHips picture SnakeyHips · Sep 20, 2018 · Viewed 11.9k times · Source

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

SnakeyHips picture SnakeyHips · Sep 21, 2018

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>

Related questions

How to call a function on selection change in v-select?

I am currently working on Vuetify, trying to call a method in Vue.js from v-select using HTML. But the @change event is not properly selecting the conditions. <v-layout row wrap> <v-flex xs12 sm4> <!-- …

Read More
Get value of clicked item in Vuetify multiple select component

I have the following v-select in my code: <v-select v-if='d.length' v-model='ci' :items='d' item-text='value.name' item-value='value.name' label='label' multiple='multiple' height='60' small-chips single-line solo @change='itemChanged' > <template v-slot:prepend-item …

Read More
Center content vertically on Vuetify

Is there a way to center content vertically in Vuetify? With the text-xs-center helper class, the content gets centered horizontally only: <v-container grid-list-md text-xs-center> <v-layout row wrap> <v-flex xs12> Hello </v-flex> </…

Read More