CODEWITHSUNDEEP
vue.jsvuejs2vue-componentvue-router
MattDionis
MattDionis

Reputation: 3616

Passing props to nested route

I have the following routes in my VueJS app:

const routes = [
  {
    path: '/',
    component: PlacesList
  },
  {
    name: 'place',
    path: '/places/:name',
    component: CurrentWeather,
    children: [
      {
        name: 'alerts',
        path: 'alerts',
        component: ForecastAlerts
      },
      {
        name: 'forecast',
        path: 'forecast',
        component: ForecastTimeline
      }
    ]
  }
];

ForecastTimeline receives props passed from CurrentWeather:

export default {
  name: 'ForecastTimeline',
  props: ['forecastData'],
  components: {
    ForecastDay
  }
}

When I navigate to /places/:name/forecast from /places/:name everything works well. However, when I try to reach /places/:name/forecast directly I get a Cannot read property 'summary' of undefined error. This occurs because forecastData is fetched asynchronously within the CurrentWeather component. What is the proper way to handle asynchronous properties passed to a nested route?

Upvotes: 2

Views: 2418

Answers (1)

mchasles
mchasles

Reputation: 1283

Have you tried not displaying the subroutes components while fetching the data ?

Something like :

export default {
  name: 'CurrentWeather',
  data(){
    return {
      loading: true
    }
  },
  created(){
    this.fetchForecastData().then(() => {
      this.loading = false;
    });
  },
  methods: {
    fetchForecastData() {
      return fetch('http://..');
    }
  }
}

In CurrentWeather template :

<router-view v-if="!loading"></router-view>

Upvotes: 1

Related Questions