如何在 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 cookbook example for consuming data in async way.

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