Vuetify - 如何轻松访问 v-select 项目文本值？

Posted 2023-02-22

【中文标题】Vuetify - 如何轻松访问 v-select 项目文本值？

【英文标题】：Vuetify - how to easily access v-select item-text value?

【发布时间】：2019-02-24 20:08:40

【问题描述】：

我想知道当项目已绑定到 v-select 并且它与项目值值分开时，如何轻松访问 v-select 的项目文本值？我希望将 item-value 值保存到我的 v-model 中，然后通过 on change 事件传递 item-text 值，如下所示：

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

如果我给 v-select 加上一个 ref 然后通过以下方式访问它，我可以获得该值：

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

但是当数据在 v-select 本身中时，这似乎有点啰嗦。如果有人知道更简单的方法，我很想听听！

谢谢！

【问题讨论】：

我的 v-select 项目由对象数组组成，因此我的项目值显示 id 属性，项目文本显示对象的名称属性。在 item-text 上使用 v-bind 会混淆显示对象的名称，而只是显示 [object Object] :(

使用scoped slots:***.com/questions/50531864/…

好的，成功了，谢谢！我会用我的做法更新我的帖子。

Customizing item-text in v-select的可能重复

请不要将答案作为问题的一部分发布。将其发布为答案。

【参考方案1】：

感谢@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>