Span in vue return [object Promise]

Question

I launch my function getOrderCount in my table in vue component, he return me only number of the orders to one of the column i table,

<div v-html="getOrderCount(user.orders_url)"></div>

async getOrderCount(link) {
        const count = await this.getOrderCount(link);
        return `<span class="p-1">${count}</span>`
 },

but why on my table is not number but object Promise? enter image description here

thanks for any help and solution

Answer 1

Async function always returns a promise. If you return to number 1, it will actually return a promise that resolves into a number 1.

I hope this example will give you inspiration about how to solve your issue.

<template>
   <div>{{count}}</div>
</template>

<script>
    async getOrderCount(link) {
   const count = await this.getOrderCount(link);
   return `<span class="p-1">${count}</span>`
},

export default {
   data() {
      return {
         orderCount: 0
      }
   },
   async created () {
      this.count = await this.getOrderCount(this.props.link);
   }
}
</script>