将整个对象分配给Vuetify v-select v-model。
将整个对象分配给Vuetify v-select v-model。
提问于 2020-08-04 16:52:59
我有以下所选的组件：
<v-select
class="ml-4"
v-model="selectedProjects"
:items="projects"
item-text="name"
item-value="id"
chips
:menu-props="{ maxHeight: '400' }"
label="Select Projects"
multiple
hint="Select projects to overlay"
persistent-hint
></v-select>"projects“是一个对象数组，因此我可以在item-name和item-value字段中引用名称和id。目前，selectedProjects只是一个it数组，但我希望它是包含在项目中的实际选定对象的数组。我怎么能这么做？
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-08-05 02:01:40
您应该能够通过设置return-object支柱来获取所选对象，化验室对此进行了如下描述：
更改选择行为以直接返回对象，而不是用项值指定的值。
Stack Overflow用户
发布于 2020-08-04 17:05:28
这行得通吗？
<template>
<v-select :items="selectProjects" v-model="selectedProject" @change="filterMe" />
</template>
<script>
export default {
data() {
return {
selectedProject: 1,
projects: [
{ id: 1, name: "John Doe", artist: "Some artist" },
{ id: 2, name: "Doe John", artist: "Some artist" }
]
};
},
computed: {
selectProjects() {
return this.projects.map(project => {
return {
value: project.id,
text: project.name
};
});
}
},
methods: {
filterMe() {
let item = this.projects.filter(
project => this.project == project.id
)[0];
console.log(item);
}
}
};
</script>当您选择一个选项时，它将使用对象ID作为v模型，但是显示文本作为选择值，如果需要的话，您应该能够过滤ID。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63251577
复制相关文章
相似问题
腾讯云开发者
