使用v-select、item-text和item-value的正确方法是什么？
使用v-select、item-text和item-value的正确方法是什么？
提问于 2022-05-19 13:49:33
这是我调用的api的响应。
从另一个角度看。
我正在存储api结果，比如在result = [];中。
我正在使用v-select和:items="result"创建一个下拉列表。
如果我想让item-text和item-value成为下拉列表中显示的文本，而services._id将使用v-model，services._id作为item-value存储在一个变量中，我应该如何编写它们。
我似乎找不出这些嵌套的属性。
回答 2
Stack Overflow用户
发布于 2022-05-19 14:14:38
您可以通过一个computed属性从所有子数组中检索所有服务。
然后，您将只有一个对象数组(而不是通过属性服务的数组数组)，并且可以指定item-text和item-value属性！
下面是一个例子
new Vue({
el: "#app",
vuetify: new Vuetify(),
data: () => {
return {
currentItem: null,
items: [{
services: [
{_id: 1,name: 'foo'},
{_id: 2, name: 'bar'}
]
},
{
services: [
{_id: 1,name: 'foo'},
{_id: 3, name: 'baz'}
]
}
]
}
},
computed: {
allServices(){
return this.items.reduce((acc, curr) => {
curr.services.forEach(service => {
if(!acc.find(x => x._id === service._id)) acc.push(service)
})
return acc
}, [])
}
}
})<script src="https://unpkg.com/vue@2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.css" />
<div id="app" data-app>
currentItem : {{currentItem}}
<v-select v-model="currentItem" :items="allServices" item-text="name" item-value="_id"></v-select>
</div>
Stack Overflow用户
发布于 2022-05-19 14:45:30
您可以使用slots的v-select来自定义所显示的数据：
<v-select
label="Services"
v-model="customVar"
:items="result"
item-value="_id"
item-text="name"
return-object
>
<template v-slot:selection="data">
{{ data.item.name }}
</template>
<template v-slot:item="data">
{{ data.item.name }}
</template>
</v-select>此外，您还可以使用上面所示的return-object
将选择行为更改为直接返回对象，而不是用项值指定的值。
这样，您就可以从所选对象中选择使用的变量。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72305772
复制相关文章
相似问题
腾讯云开发者
