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
– Yerko Palma, Commented Jun 9, 2016 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
– antoniputra, Commented Jun 9, 2016 at 19:30
@YerkoPalma My code is like general single page app project until I meet this issue. — antoniputra
– antoniputra, Commented Jun 9, 2016 at 19:32

Yerko Palma · Accepted Answer · 2016-06-09 19:54:47Z

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 9, 2016 at 19:54

Yerko Palma

12.4k5 gold badges37 silver badges59 bronze badges

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

3 Comments

Yerko Palma Over a year ago

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 hook

antoniputra Over a year ago

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 Over a year ago

because if I using solution that you gave. it will have many v-if="dataReady" in every routerComponent.

pespantelis · Accepted Answer · 2016-06-10 05:16:24Z

3

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

edited Jun 10, 2016 at 5:16

answered Jun 10, 2016 at 5:04

pespantelis

15.4k7 gold badges46 silver badges47 bronze badges

Comments

crabbly · Accepted Answer · 2016-06-10 02:19:53Z

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, 2016 at 2:19

crabbly

5,2261 gold badge26 silver badges48 bronze badges

Collectives™ on Stack Overflow

Vuejs synchronously request before render data

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related