[Vuejs]-Vue Vuetify async function inside data-table template

by

0👍

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.

Leave a comment