Выделить весь объект Vuetify v-select v-model - PullRequest
Новая
       8

Выделить весь объект Vuetify v-select v-model

1 голос
/ 04 августа 2020

У меня есть компонент vuetify select следующим образом: 

<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 и значение элемента поля. На данный момент selectedProjects - это просто массив идентификаторов, но я хочу, чтобы это был массив фактических выбранных объектов, содержащихся в проектах . Как я могу это сделать?

Ответы [ 2 ]

1 голос
/ 05 августа 2020

Вы должны иметь возможность получить выбранные объекты, установив свойство return-object, которое Vuetify docs описывает следующим образом:

Изменяет поведение выбора, чтобы вернуть объект напрямую, а не значение, указанное с помощью item-value

1 голос
/ 04 августа 2020

Это работает? 

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

Когда вы выбираете параметр, он будет использовать идентификатор объекта как v-модель, но отображать текст как значение выбора, вы сможете фильтровать идентификатор после того, как если необходимо.

...