[Vuejs]-Vue wait for render template and display it

by

0đź‘Ť

Instead of making Vue do the same work over and over, You could make use of the v-else directive, which may work better for you:

      <li v-if="!$auth.check()" class="pull-right" v-cloak>
        <router-link :to="{ name: 'register' }">Register</router-link>
      </li>
      <li v-else class="pull-right">
        <a href="#" @click.prevent="$auth.logout()">Logout</a>
      </li>

0đź‘Ť

v-cloak is not helping because that gets taken away as soon as the Vue app is ready. Apparently there’s a delay from when Vue is ready and when the $auth function returns a response. I’d recommend hiding all of the login/logout links until $auth returns something.

You’d have to hook into what $auth returns somehow, and use that hook to change the authCheckDone to true. 

Vue {
  data: {
    authCheckDone: false
    ...
  }
}

<ul class="list-inline">
      <li>
        <router-link :to="{ name: 'home' }">Home</router-link>
      </li>
      <span v-if="authCheckDone">
         <li v-if="!$auth.check()" class="pull-right">
           <router-link :to="{ name: 'login' }">Login</router-link>
         </li>
         <li v-if="!$auth.check()" class="pull-right" v-cloak>
           <router-link :to="{ name: 'register' }">Register</router-link>
         </li>
         <li v-if="$auth.check()" class="pull-right">
           <a href="#" @click.prevent="$auth.logout()">Logout</a>
         </li>
      </span>
</ul>

0đź‘Ť

You have to wait a bit until vue-auth is actually ready. From the docs:

ready

  • Get binded ready property to know when user is fully loaded and checked.
  • Can also set a single callback which will fire once (on refresh or entry).
<div v-if="$auth.ready()">
    <vue-router></vue-router>
</div>
<div v-if="!$auth.ready()">
    Site loading...
</div>

created() {
    this.$auth.ready(function () {
        console.log(this); // Will be proper context.
    });
}

In other words, instead of v-cloak use:

<div class="panel panel-default" v-if="$auth.ready()">

Note: this can do some quick “flashing” of a white page. In that case you may want to add a loading image or something, like:

<div v-if="!$auth.ready()">
    <img src="loading.gif">
</div>

Naturally, if this div is close to the other v-else can be used.

Leave a comment