Allouer un objet entier à Vuetify v-select v-model

Question

J'ai le composant Vuetify Select comme suit :

<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" est un tableau d'objets, et je peux donc faire référence au nom et à l'id dans la balise nom de l'article y valeur de l'article champs. A l'heure actuelle selectedProjects n'est qu'un tableau d'identifiants, mais je veux qu'il soit un tableau des objets sélectionnés contenus dans le fichier projets . Comment puis-je le faire ?

Answer 1

Vous devriez être en mesure d'obtenir les objets sélectionnés en définissant l'attribut return-object prop, que le Documents Vuetify décrit ainsi :

Modifie le comportement de la sélection pour retourner directement l'objet plutôt que plutôt que la valeur spécifiée avec item-value

Answer 2

Est-ce que ça marche ?

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

Lorsque vous sélectionnez une option, l'ID de l'objet est utilisé comme modèle virtuel mais le texte est affiché comme valeur de sélection. Vous devriez pouvoir filtrer l'ID après si nécessaire.