I have everything set up on codesandbox. Any assistance would be highly appreciated.
// Here is the link to my Axios Getter in /year
methods: {
async fetchData() {
const self = this;
const response = await axios.get(
"https://example.com/data.json"
);
this.data = response.data;
this.y2001Data = response.data.y2001;
this.y2002Data = response.data.y2002;
this.y2003Data = response.data.y2003;
console.log(this.y2001Data, "this.y2001Data From Year.vue");
console.log(this.y2002Data, "this.y2002Data From Year.vue");
console.log(this.y2003Data, "this.y2003Data From Year.vue");
}
},
mounted() {
this.fetchData();
console.log(this.data, "From Year.vue - Before Mount");
}
I retrieve the data here and pass it down to the child routes. In /year/2001:
beforeMount() {
this.data = this.$parent.y2001Data;
console.log(this.data, "From y2001Data.vue's Parent ");
}
Then I pass this data to a child component in the child route.
<ChildComponent :data="this.data"></ChildComponent>
// Child Route that utilizes data from /Year Axios Call
When I navigate to the above child route (/year/2002), I do not see any data for 2002, but visiting 2001 and 2003 shows the data correctly.
If I refresh one of the other child routes (2001 or 2003), the data for 2002 appears and the refreshed route no longer displays any data.
However, if I refresh the main /Years route, all the data displays properly.
Any idea why this issue occurs and how to resolve it? I prefer direct linking to specific routes over redirection if possible.
Sandbox Editor: https://codesandbox.io/s/xyz123