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>

如何在Vue v-if中使用异步功能？

1 个答案: