In my custom table component, I am using a v-data-table to display data that is passed as a prop. I perform some data cleaning operations and then call an asynchronous function to fetch additional data from an API:
//load cloud storage data
const cleanData = ref<any[]>()
const loadThumbnails = async (dmcp_tab_id : number, dmcp_box_id : string) => {
let attempts : number = 1
const result = ref<CloudStorage | null>()
do {
attempts=attempts+1
result.value = await documentStore.getCloudStorage(dmcp_tab_id, dmcp_box_id)
} while (result.value!.thumbnail == "" && attempts <= 5)
return result.value?.thumbnail
}
const loadCloudStorageData = () => {
cleanData.value = props.data
cleanData.value = props.data.map(async (item) => { return {...item, when_uploaded: dayjs(item.when_uploaded).format('MM/DD/YYYY'), thumbnail: await loadThumbnails(item.dmcp_tab_id, item.dmcp_box_id)}})
}
loadCloudStorageData()
watch(props.data, () => {
loadCloudStorageData()
})
Upon inspecting the cleanData and using console.log(), I noticed that it resolves to an array of promises, resulting in nothing being displayed in the v-data-table. However, if I remove the await and async from the thumbnail function, everything loads correctly into the v-data-table. I am uncertain how to handle promises within the v-data-table.