Vuetify - как легко получить доступ к текстовому значению элемента v-select?

Мне было интересно, как я могу легко получить доступ к значению текста элемента для v-select, когда элементы были привязаны к нему, и оно отделено от значения значения элемента? Я хочу сохранить значение значения элемента в моей v-модели, но затем также передать значение текста элемента через событие при изменении, например:

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

Я могу получить значение, если поставлю ссылку на v-select, а затем получу к нему доступ через:

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

но это кажется немного запутанным, когда данные находятся в самом v-select. Если кто-то знает более простой способ сделать это, я бы хотел его услышать!

Спасибо!


vue.js vuetify.js v-select
person SnakeyHips    schedule 20.09.2018    source источник
comment
Мои элементы v-select состоят из массива объектов, поэтому мое значение элемента отображает свойство id, а текст элемента отображает свойство name объекта. Использование v-bind в тексте элемента приводит к беспорядку с отображением имен объектов и вместо этого просто отображает [object Object] :(   -  person SnakeyHips    schedule 20.09.2018
comment
Используйте scoped slots: stackoverflow.com/questions/50531864 /   -  person Bennett Dams    schedule 20.09.2018
comment
Хорошо, да, все заработало, спасибо! Я обновлю свой пост о том, как я это сделал.   -  person SnakeyHips    schedule 20.09.2018
comment
Возможный дубликат настройки текста элемента в v-select   -  person Toodoo    schedule 20.09.2018
comment
Пожалуйста, не публикуйте ответ как часть вопроса. Опубликуйте это как ответ.   -  person Chenmunka    schedule 20.09.2018

Ответы (1)


arrow_upward
1
arrow_downward

Благодаря @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>
person SnakeyHips    schedule 21.09.2018