Question

我可以通过如下方式选择选择组件：

<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>

“项目”是一个对象数组，因此我可以在 item-name 和 item-value 字段中引用名称和ID。目前， selectedProjects 只是一个ID数组，但我希望它是 projects 中包含的实际选定对象的数组。我该怎么办？

Answer 1

这行吗？

<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。

Answer 2

您应该可以通过设置Vuetify docs这样描述的return-object道具来获取所选对象：

更改选择行为以直接返回对象比使用item-value指定的值

分配整个对象以Vuetify v-select v-model

2 个答案: