Vue v-if에서 비동기 기능을 사용하는 방법은 무엇입니까?

Vue v-if에서 비동기 기능을 사용하는 방법은 무엇입니까?

권한을 제어하는 서비스가 있습니다. 다음과 같습니다.

//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>

이것을 컴포넌트의 비동기 함수와 계산 속성에 포함하려고 했지만 작동하지 않습니다(반환되지 않음).{}좀 못생긴 것 같아요.

이 문제를 해결할 방법이 있나요?

이러한 종류의 스탭에게는, 마운트 또는 작성된 라이프 사이클 훅으로 비동기 조작을 실행해, 데이터를 갱신하는 것이 일반적입니다.비동기 방식으로 데이터를 사용하는 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>

언급URL : https://stackoverflow.com/questions/53212481/how-use-an-async-function-in-vue-v-if