I am facing an issue with asynchronously fetching data for the v-select Vuetify Component. The problem is that the v-select component only accepts an Array for the :items attribute. Is there a workaround to fetch data asynchronously?
Error: Invalid prop type - expected Array, received Promise
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(field.items) : []"
></v-select>
<v-checkbox v-else-if="field.component === 'v-checkbox'" :label="field.label"></v-checkbox>
</v-flex>
</v-layout>
</template>
async method:
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"];
}