typescript - 如何在 Vue 中异步加载 vuetify 下拉(v-select)项目

Question

我在异步获取 v-select 的数据时遇到问题Vuetify 组件。问题是 v-select 组件仅对 :items 属性执行除 Array 之外的操作。异步获取数据的解决方法是什么:

Invalid prop: type check failed for prop "items". Expected Array, got Promise

模板:

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

脚本:

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