CODEWITHSUNDEEP
vue.jsvuetify.js
Cornel Verster
Cornel Verster

Reputation: 1783

Allocate an entire object to Vuetify v-select v-model

I have vuetify select component as follows:

<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" is an array of objects, and thus I can reference name and id in the item-name and item-value fields. At the moment selectedProjects is just an array of ids, but I want it to be an array of the actual selected objects contained in projects. How can I do that?

Upvotes: 3

Views: 3549

Answers (2)

Noah Stahl
Noah Stahl

Reputation: 7623

You should be able to get the selected objects by setting the return-object prop, which the Vuetify docs describes thusly:

Changes the selection behavior to return the object directly rather than the value specified with item-value

Upvotes: 2

Leonardo Bezerra
Leonardo Bezerra

Reputation: 745

Does this work?

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

When you select an option, it will use the Object ID as v-model but display text as the select value, you should be able to filter the ID after if needed.

Upvotes: 1

Related Questions