在 Vue.js 中的 Vuetify 的 v-select 中获取 Id 作为选定文本

Posted 2023-02-23

【中文标题】在 Vue.js 中的 Vuetify 的 v-select 中获取 Id 作为选定文本

【英文标题】：Getting Id as selected text in Vuetify's v-select in Vue.js

【发布时间】：2021-02-05 13:49:51

【问题描述】：

我在 Vue.js 中使用 v-select 并像这样使用它：

 <v-select :options="items" v-model="Form.id" @input="setSelected($event)"></v-select>

但它显示 id 作为选定的文本我想将其值显示为它的文本。

目前我得到的输出如下图：

数据来源：

   [
    
    "id":1,
    "label":"laptop",
    ,
    
    "id":2,
    "label":"mouse",
    ,
    
    "id":3,
    "label":"PC",
    
    ]

非常感谢任何帮助。

【问题讨论】：

你的数据是什么样子的？

@MoDGenesis：我在我的问题中添加了格式，codepen.io/RoxxE/pen/pobNObw 我想设置默认 id 为 2 的选项

【参考方案1】：

尝试使用label 指定item-text 属性：

<v-select :options="items" item-text="label" item-value="id" v-model="Form"
 return-object
 @input="setSelected($event)">
</v-select>

LIVE DEMO

【讨论】：

感谢您的回答，我尝试了您的代码，但它仍然显示 id 作为选定的文本，我还添加了数据格式。请检查，我也在使用带有 item-text 和 items 的选项

你能检查这个链接codepen.io/RoxxE/pen/pobNObw。我正在尝试将 id 2 设置为默认值并显示 Bar

在您的情况下将其更改为item-text="label"

你能检查这个链接codepen.io/RoxxE/pen/pobNObw

谢谢，这正是我想要的

【参考方案2】：

<v-select :items="items" item-text="label" label="Standard"></v-select>

几乎和上面一样，但这正是你要找的。​​p>

item-text="label"是因为你的数据类型有id，label

【参考方案3】：

在设置 v-modal 的值之前，您可以将该值解析为整数

this.form = parseInt(this.form);

它对我有用

谢谢。