Как выполнить асинхронную загрузку выпадающих (v-select) элементов vuetify в Vue

Question

У меня проблема с асинхронной загрузкой данных для компонента v-select Vuetify.Дело в том, что компонент v-select делает только, кроме Array для атрибута :items.Что такое обходной путь для асинхронной выборки данных:

Недопустимый проп: проверка типа не выполнена для проп "предметов".Ожидаемый массив, получил обещание

шаблон :

<template>
    <v-layout row wrap>
        <v-flex xs12 md6 v-for="(field, index) in fields" :key="index" v-show="!field.hidden">
            <v-text-field v-if="field.component === 'v-text-field'" :label="field.label"></v-text-field>
            <v-select
                v-else-if="field.component === 'v-select' "
                :label="field.label"
                :items="(typeof field.items === 'string') ? getLookups(field.items) : []"
            ></v-select>
            <v-checkbox v-else-if="field.component === 'v-checkbox'" :label="field.label"></v-checkbox>
        </v-flex>
    </v-layout>
</template>

асинхронный метод :

async getLookups( api: string | string[]) {
    // Mock Async timeout
    var wait = (ms: any) => new Promise((r, j) => setTimeout(r, ms));
    wait(2000);
    return ["test1", "test2", "test3", "test4"];
}

Answer 1

Лучшее решение / обходной путь, который я нашел, - это создание локальной переменной и возврат экземпляра локальной переменной.Я просто передаю индекс, чтобы создать уникальный объект для моего динамического компонента

template :

<template>
    <v-layout row wrap>
        <v-flex xs12 md6 v-for="(field, index) in fields" :key="index" v-show="!field.hidden">
            <v-text-field v-if="field.component === 'v-text-field'" :label="field.label"></v-text-field>
            <v-select
                v-else-if="field.component === 'v-select' "
                :label="field.label"
                :items="(typeof field.items === 'string') ? getLookups(index, field.items) : field.items"
            ></v-select>
            <v-checkbox v-else-if="field.component === 'v-checkbox'" :label="field.label"></v-checkbox>
        </v-flex>
    </v-layout>
</template>

script :

private lookups: any = {};

getLookups(index: number, api: string | string[]) {
    // Mock Async timeout
    var wait = (ms: any) => new Promise((r, j) => setTimeout(r, ms));
    wait(2000).then(() => {
        this.lookups[index] = ["test1", "test2", "test3", "test4"];
    });
    return this.lookups[index];
}

Таким образом, компонент v-select будет прослушивать локальную переменную.Как только он заполнится, он обновит элементы v-select.