Vue Vuetify async function inside data-table template

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.