如何在 Vue v-if 中使用异步函数？

Question

我有一个控制权限的服务，是这样的：

//service
async function isAdmin(){
    let user = await getUser();
    //other stuff
    return isAdmin;//true|false
}

//in main
Vue.prototype.$service = permissions;

//component
<template>
  <div>
    <h1 v-if="$service.isAdmin()">You are Admin</h1>
    <h1 v-else>You aren't Admin</h1>
  </div>
</template>

我尝试将它包含在组件的异步函数中，并作为计算属性，但不起作用（永远返回{}true），并且看起来有些丑陋。

有没有办法管理这个？

Answer 1

这类人员的常见做法是在挂载或创建的生命周期钩子中运行异步操作并更新数据。 以异步方式消费数据的 Vue 食谱示例。

<template>
  <div>
    <... v-if="isAdmin">
  </div>
</template>
<script>
export defualt {
  data(){
   return {isAdmin : null}
  }, 
  created: async function(){
      this.isAdmin = await this.$service.isAdmin()
  }
}
</script>