How use an async function in Vue v-if?

Question

I have a service that control the permissions, is something like this:

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

I tried including this in async function in the component, and as computed property, but doesn't work (ever returns a {} true), and seems some ugly.

There is a way to manage this?

tony19 · Accepted Answer · 2022-07-15 20:41:03Z

9

The common practice to this kind of staff is to run the async operation in the mounted or created lifecycle hooks and update the data. 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>

edited Jul 15, 2022 at 20:41

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Nov 8, 2018 at 17:00

elad frizi

7254 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Koronos Over a year ago

At final I added this as getter in vuex, but your example gave me an idea of how manage this. Anyway is helpful your code..

Collectives™ on Stack Overflow

How use an async function in Vue v-if?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related