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

Javascript 如何在Vue v-if中使用异步函数?,javascript,asynchronous,vuejs2,vue-component,Javascript,Asynchronous,Vuejs2,Vue Component,我有一个控制权限的服务,如下所示: //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="$s

我有一个控制权限的服务,如下所示:

//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>
//服务
异步函数isAdmin(){
让用户=等待getUser();
//其他东西
返回isAdmin;//true | false
}
//大体上
Vue.prototype.$service=权限;
//组成部分
你是管理员
你不是管理员
我试着在组件的异步函数中包含它,并将其作为computed属性,但不起作用(总是返回一个
{}
true),看起来有点难看


有一种管理方法吗?

这类员工的常见做法是在已装载或创建的生命周期挂钩中运行异步操作并更新数据。


出口解除{
数据(){
返回{isAdmin:null}
}, 
已创建:异步函数(){
this.isAdmin=等待此消息。$service.isAdmin()
}
}

在期末考试中,我在vuex中添加了这个作为getter,但您的示例让我了解了如何管理它。无论如何,这对你的代码很有帮助。。
<template>
  <div>
    <... v-if="isAdmin">
  </div>
</template>
<script>
export defualt {
  data(){
   return {isAdmin : null}
  }, 
  created: async function(){
      this.isAdmin = await this.$service.isAdmin()
  }
}
</script>