javascript - 如何在 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

此类人员的常见做法是在已安装或已创建的生命周期 Hook 中运行异步操作并更新数据。 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>