Как использовать асинхронную функцию в Vue V-If? - PullRequest
Новая
       25

Как использовать асинхронную функцию в Vue V-If?

0 голосов
/ 08 ноября 2018

У меня есть сервис, который контролирует разрешения, это что-то вроде этого: 

//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), и кажется немного уродливым.

Есть способ справиться с этим?

1 Ответ

0 голосов
/ 08 ноября 2018

Обычной практикой для такого рода сотрудников является запуск асинхронной операции в подключенных или созданных хуках жизненного цикла и обновление данных. Пример Vue Cookbook для асинхронного использования данных. 

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