Resolved: I need assistance in determining why a data property won’t navigate with a router.push

In this post, we will see how to resolve I need assistance in determining why a data property won’t navigate with a router.push


I am writing a Vue.js project for this online course, and I am having a hard time moving some user input data from one component to another. We start in the MathFactsView.vue page, where a user selects an operation, hits the play button, and is navigated to a game screen called MFConfig.vue. When the game starts, an equation should display at the top of the screen and a player should attempt to answer, for each correct question, the score increases by 1 and a new equation is generated.
The problem is when a player selects an operation and presses start, I can see via console.log that the data is grabbed. However, on the game screen, no equation is generated on game start. This is because the operation is labeled as undefined. This tells me that the operation data property is not receiving information via routing from the starting page. I can’t seem to find a working solution for this. I have pasted the code for both pages, and below that I will list what I’ve tried.
I have tried several things, including replacing some items inside mounted/created with the watch property to prevent mounted loading before the data is received from the previous page. I’ve also tried changing mounted to created and vice versa. I have tried beforeRouteEnter…etc navigation guard to set the operation before the component is created. None of these have had the desired effect. Any help would be appreciated.

Best Answer:

If your vue-router is set up correctly I believe your code should work. If operations is a route param, make sure it’s defined in the route config
working sandbox example

If you have better answer, please add a comment about this, thank you!