Passing props in Vue router results in the props being undefined

Question

Passing props in Vue router results in the props being undefined

I am attempting to pass a props via the vue router using a router link that appears like this

<router-link :to="{ name: 'product-details', params: { productId: 123 } }" class="product-sbb d-block">

Below are my routes

{
  path: '/product/details/:productId',
  name: 'product-details',
  props: true,
  components: {
   navbar: Navbar,
   default: ProductDetail,
   footer: Footer
 },
},

I have set the props to true and included the params in the path /:productId. I also referred to the example provided in this link https://codesandbox.io/s/o41j762pnz

Despite following the example, I am facing an issue where the props always appear as undefined when trying to use them in my component. Here is my component

import ProductDetail from '../components/parts/ProductDetailGallery.vue';

export default {
  props: {
    productId: Number
  },
  data() {
  },
  created() {
    console.log(this.productId)
  }
}

While the example runs perfectly without any problems, mine does not. How can I resolve this issue?

Thank you

javascript vue.js vue-router

Answer 1

Answer №1

When utilizing named views within your router setup, simply declaring prop: true will not suffice. It is necessary to explicitly specify this on each individual view that needs to receive the parameter. To achieve this, you need to adjust how the prop is defined. Your current method, shown below, will not function as expected:

props: true

The correct approach involves defining it like this:

props: {
    // Ensure 'true' is set for the default view, which corresponds to ProductDetail
    default: true
}

This means your routes should be structured as follows:

const routes = [
  {
    path: "/product/details/:productId",
    name: "product-details",
    components: {
      navbar: Navbar,
      default: ProductDetail,
      footer: Footer
    },
    props: {
      // Make sure 'true' is set for the default view, which utilizes ProductDetail
      default: true
    }
  }
];

Answer 2

When utilizing named views within your router setup, simply declaring prop: true will not suffice. It is necessary to explicitly specify this on each individual view that needs to receive the parameter. To achieve this, you need to adjust how the prop is defined. Your current method, shown below, will not function as expected:

props: true

The correct approach involves defining it like this:

props: {
    // Ensure 'true' is set for the default view, which corresponds to ProductDetail
    default: true
}

This means your routes should be structured as follows:

const routes = [
  {
    path: "/product/details/:productId",
    name: "product-details",
    components: {
      navbar: Navbar,
      default: ProductDetail,
      footer: Footer
    },
    props: {
      // Make sure 'true' is set for the default view, which utilizes ProductDetail
      default: true
    }
  }
];

Passing props in Vue router results in the props being undefined

Answer №1

Similar questions

Tips for persisting objects created in PHP while utilizing XMLHttpRequest

Trouble arises with kids when trying to adjust the display to block mode

Why am I unable to retrieve data using jQuery and PHP?

Struggling to retrieve the accurate input value when the browser's return button is clicked?

Vuetify tooltip failing to display

Using Vue the proper method to ensure the vuex store is accessible to a dynamically generated component

Modify a single parameter of an element in a Map

How can you update the background image of a particular div using the 'onclick' feature in React.JS?

Having trouble selecting an element by name that contains a specific string followed by [..] using jQuery

How to select an unwrapped element using the v-popover component

When using Webpack, there may be difficulties resolving relative path import of express static files

The method request.getParameter in Servlet may sometimes result in a null

Shut down the tab or browser window containing information on vue

Two interconnected queries with the second query relying on the results of the first

Inject SCSS variables into Typescript in Vue 2 Using Vue-cli 5

Focus on programmatically generated elements by utilizing refs

The serialize() method in Ajax is not capturing all the data fields from an HTML form

Angular's unconventional solution to Firebase

Utilizing eval properly in JavaScript

Leveraging grunt-develop