[Vuejs]-Content from JSON file not displaying when trying to access via vue file

by

1👍

✅

The content is not displaying because of the prop error. Without a valid prop id, your code that finds the correct recipe doesn’t work. Fixing the error will fix the content not displaying.

The key is knowing your router params become your URL params. Specifying props: true takes the URL params and applies them as the component prop values. URL always being a string, the params are also always strings, unless you cast the params in your route definition:

{
  path: "/post/:id",
  name: "PostDetails",
  component: PostDetails,
  props: (route) => {
    return { ...route.params, id: Number(route.params.id) };
  }
}

Now id will always be cast as a Number prop.

P.S. adding ...router.params is for in case you add more props in the future that don’t need specific casting, but is technically not needed while id remains your only prop.

👤yoduh

Leave a comment