Vue Vuetify async function inside data-table template - vue.js

Question

I am trying to populate a column with data I get from my API. By doing it the way tried, the column only shows "[object Promise]" instead of the array of objects I get back from the api.
What am I doing wrong?
<template v-slot:item.holdings="{ item }">
{{ getTokenBalance(item) }}
</template>
async getTokenBalance(item) {
try {
let address = this.getSyncedAddress(item);
const query = new Moralis.Query("TokenBalance");
query.equalTo("address", address);
query.descending("updatedAt");
const balance = await query.first();
return balance.attributes.balance;
} catch (error) {
console.log(error);
}
},

Answer 1

An async function automatically wraps it inside a Promise.
So what your function is returning is not a string but a Promise<string>.
On the template, when you print a non primitive value, it will convert it to string using toString(). For a Promise, this give [object Promise].
A possible solution would be to populate your item object directly, instead of returning the result, everytime the displayed items change:
<template>
<v-data-table #current-items="populateItems">
<template v-slot:item.holdings="{ item }">
{{ item.balance }}
</template>
</v-data-table>
</template>
<script>
populateItems(displayedItems)
// Load the balance for all displayed items (to avoid requesting all items, even the onces not displayed)
return Promise.all(diplayItems.map(item => this.getTokenBalance(item)))
}
async getTokenBalance(item) {
try {
// [...]
item.balance = balance.attributes.balance;
} catch (error) {
console.log(error);
}
}
</script>
Note: Maybe you'll need to call populateItems once at loading, I don't know if the current-items event is fired on mounting.