Vuejs synchronously request before render data

Question

I have single page application that requires authentication. When user was authenticated then visit some pages or hit reload button in browser it will request an api that provide their auth data. then I have an error like this:

[Vue warn]: Error when evaluating expression "auth.name": TypeError: Cannot read property 'name' of null (found in component: <navbar>)

This error is caused because vue render auth data while the request to api have not finished yet.

Is possible to make vue wait the request api until finish first, before vue render auth data?

just more clearly what going on here. Here is the code:

// main.js
import Vue from 'vue'
import App from './App.vue' // root vue
import store from './vuex/store' // vuex
import router from './router' // my router map

sync(store, router)
router.start(App, '#app')
// end main.js



// App.vue
<template>
  <main>
    <div class="wrapper">
      <router-view></router-view>
    </div>
  </main>
</template>

<script>
  import authService from './services/auth' // import authservice

  ready () {
    // here is code that should be done first before vue render all authData
    auth.getUser((response) => {
      self.authData = response
    })
  },
  data () {
    return {
      authData: null // default is null until the api finish the process
    }
  }
</script>
// end App.vue



// SomeRouterComponents.vue
<template>
  <!-- some content -->
  <div>
    // always got error: cannot read property 'name' of null
    // here I expect to render this after api has been resolved
    {{ $root.authData.name }}
  </div>
  <!-- some content -->
</template>

You should post your code. I don't think is necesary to go synchronously — Yerko Palma, Jun 09 '16 at 19:09
@YerkoPalma I am using vue-router and vuex. currently I put code (for request an api) in App.vue at ready() — antoniputra, Jun 09 '16 at 19:30
@YerkoPalma My code is like general single page app project until I meet this issue. — antoniputra, Jun 09 '16 at 19:32
Are you using vue-resource or any other library for http requests? how are you reading the response with a callback? promises? — Yerko Palma, Jun 09 '16 at 19:35
Related: http://stackoverflow.com/questions/37731656/rest-api-doesnt-load-data-quick-enough-before-the-route-is-shown-using-vue-js-a — ceejayoz, Jun 09 '16 at 19:58

score 14 · Answer 1 · answered Jun 09 '16 at 19:54

14

The problem as you said is that you try to access an object that isn't present, and because of the error, Vue can't render it in the next tick. The solution is to use a simple v-if to check if the data is loaded, this work only for reactive data.

root component

  import auth from './services/auth' // import authservice

  ready () {
    // here is code that should be done first before vue render all authData
    auth.getUser((response) => {
      self.authData = response
      self.dataReady = true
    })
  },
  data () {
    return {
      authData: null, // default is null until the api finish the process
      dataReady: false
    }
  }

otherComponent

  <div v-if="dataReady">
    // note that if you use v-show you will get the same error
    {{ $root.authData.name }}
  </div>
  <div v-if="!dataReady">
    // or some other loading effect
    Loading...
  </div>

I used v-if="!dataReady" instead of v-else because it will be deprecated in Vue 2.0

answered Jun 09 '16 at 19:54

Yerko Palma

12,041
5
33
57

Also, try to use another cycle hook instead of `ready` as ready is called when the DOM has been rendered, and you want that code before that event. Prefer [`created`](http://vuejs.org/guide/instance.html#Lifecycle-Diagram) hook – Yerko Palma Jun 09 '16 at 19:57
how about if I call the authService in main.js. like: ```auth.getUser(null, (response) => { router.start(App, '#app') })``` then in App.vue just receive the auth data using: `this.authData = auth.user` I just try this and work like expected. but I am not sure if this is good solution – antoniputra Jun 09 '16 at 20:09
2

because if I using solution that you gave. it will have many v-if="dataReady" in every routerComponent. – antoniputra Jun 09 '16 at 20:12

Pantelis Peslis · Answer 2 · 2016-06-10T05:16:24.993

You could use the data transition hook with the waitForDataoption enabled:

<script>
  import authService from './services/auth'

  export default {
    route: {
      waitForData: true, // wait until data is loaded

      data (transition) {
        authService.getUser((response) => {
          transition.next({ authData: response }) // set data
        })
      }
    },

    data () {
      return {
        authData: null
      }
    }
  }
</script>

Also, if you don't want to use that option, you could check if the data is loaded by using the $loadingRouteData property.

More details here: http://router.vuejs.org/en/pipeline/data.html

score 2 · Answer 3 · answered Jun 10 '16 at 02:19

2

You could just prevent Vue from trying to access the object property, like this:

{{ $root.authData ? $root.authData.name : null }}

You could even change null for a Loading... message in some cases.

answered Jun 10 '16 at 02:19

crabbly

5,106
1
23
46

Vuejs synchronously request before render data

3 Answers3