[Vuejs]-Set ajax-fetched data to component before render

by

3👍

✅

Processing steps:

  1. axios api is calling
  2. component is created
  3. next() in beforeRouteEnter is called. At that time, because component is created, so vm variable is available.

If you console log in your component

  created() {
    console.log('Component is created!')
  },
  beforeRouteEnter(to, from, next) {
    setTimeout(() => {
      next(vm => {
        console.log('next() is called')
      })
    }, 3000)
  },

Then the result will be

Component is created!

next() is called

You should set default value to your data, or add a safety check.

<template>
  <main>
    <h1>{{ entry? entry.title: '' }}</h1>
  </main>
</template>
👤ittus

Leave a comment