Vue 中的 Span 返回 [object Promise]

Question

我在 vue 组件中的 table 中启动了我的函数 getOrderCount，他只将订单数返回给我表中的一列，

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

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

但是为什么我的桌子上不是number 而是object Promise？ enter image description here

感谢您的帮助和解决方案

Answer 1

异步函数总是返回一个承诺。如果返回数字 1，它实际上会返回一个解析为数字 1 的承诺。

我希望这个例子能给你启发如何解决你的问题。

<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>