Vue - How to pass data to child component after route is entered

Question

Hey I'm relatively new to vue.js. I have a Home.vue which creates a data array after successful login and entering the route.

I tried it with

<template>
  <div class="home">
    ***
    <History :data="this.cData" />
    ***
  </div>
</template>

***

 beforeRouteEnter(to, from, next) {
    next(async (vm) => {
      vm.cData = await vm.select(vm.handle);
      console.log(vm.cData);
    });
  },

But the data is send before beforeRouteEnter() and the History component needs it for creating itself. Is there a way do to it?

Answer 1

If the History component needs it for creating itself, then you should defer creation of the component (with v-if ) until cData is ready. cData should be declared upfront in the data object with value null .

You're also doing this.cData in the template but it should be just cData .

<History v-if="cData" :data="cData" />