Week 10 - Error on Product Page

[guyewhite]

Hi Team,

For some reason, I cannot get my individual product page to show. I've gone through the Week 10 Part 3 video 3 times and still end up getting the same error.

Would anyone be willing to give me a hand at figuring this out?

Here is my GitHub repository: https://github.com/guyewhite/e28/tree/master/zipfoods

Here is the error I am seeing:

[DoryAzar]

If you notice the error, the id of the product is not being passed. This is because in the main.js, you need to add « props=true » for the path definition. Otherwise, id won’t be passed as a prop. This should do it.

[guyewhite]

Thank you, @DoryAzar. Is there a way that I could have seen that using the information I posted above? Somehow, I missed that step in the walkthrough.

[susanBuck]

@guyewhite -

With the error you shared, the "red flag" was the URL that was being pinged, and noting that the id portion of the url was undefined:

Seeing that narrows down that the id from the route segment/param was not correctly being passed. Then you'd have to do some further deduction to understand why.

For reference, here's the explanation from the notes about setting props:true https://hesweb.dev/e28/notes/vue/vue-router#dynamic-route-matching-with-propstrue

(Covered in Week 9 Part 5 video starting at 32:00)

[guyewhite]

@susanBuck and @DoryAzar Thanks for your help in this.