Passing components as props in Vue routing

Question

Passing components as props in Vue routing

Looking to extract a number from a route parameter :

routes: [{ path: '/user/:id', component: User }]

Wanting to access the prop within the User component:

export default {
    props: {
       id: Number
    }
}

Encountering an error message:

Invalid prop: type check failed for prop "id". Expected Number with value 2, got 
String with value "2".

Is there a way to automatically convert the value to a number? I explored https://github.com/posva/vue-coerce-props but believe I can achieve the same without using another extension.

javascript vue.js vue-props

Answer 1

Answer №1

To customize the prop for your component, you can create a computed property that transforms the prop into the desired format. Make sure to update the prop definition to allow for both strings and numbers.

export default {
    props: {
        id: {
            validator(value) {
                return !isNaN(parseInt(propVal));
            }
        }
    },
    computed: {
        parsedId() { 
            return parseInt(this.id); 
        }   
    }
}

In your code, replace usages of id with parsedId, although this workaround isn't ideal. There is an open RFC proposing separate internal and external names for props.

For vue-router, consider using the props function in route definitions to map route parameters to your desired prop structure.

You could implement something like this:

routes: [{ 
    path: '/user/:id', 
    component: User,
    props: route => ({ id: parseInt(route.params.id) })
}]

Answer 2

To customize the prop for your component, you can create a computed property that transforms the prop into the desired format. Make sure to update the prop definition to allow for both strings and numbers.

export default {
    props: {
        id: {
            validator(value) {
                return !isNaN(parseInt(propVal));
            }
        }
    },
    computed: {
        parsedId() { 
            return parseInt(this.id); 
        }   
    }
}

In your code, replace usages of id with parsedId, although this workaround isn't ideal. There is an open RFC proposing separate internal and external names for props.

For vue-router, consider using the props function in route definitions to map route parameters to your desired prop structure.

You could implement something like this:

routes: [{ 
    path: '/user/:id', 
    component: User,
    props: route => ({ id: parseInt(route.params.id) })
}]

Passing components as props in Vue routing

Answer №1

Similar questions

"Unraveling the Mystery of jQuery In

Enhance Your Search Functionality with an Angular Pipe

Extracting values from PHP using AJAX

import jQuery into a JavaScript file

A simple guide on passing a variable from Node.js to the view

Tips for enabling/disabling a Chrome extension through the utilization of local storage in the background page

Customizing demonstration code for EventDrops with D3.js (by marmelab) - what are the best strategies?

Updating Property of a div in Vue.js

Disable automatic submission of XMLHttpRequest

Determine the dropdown list value by analyzing the final two variables in a textfield

Refreshing the Angular resource under observation

Issue with triggering ReactJS onClick function accurately

What is the best way to create JavaScript code specifically for devices with a maximum width of 520px?

Getting the WatchPosition update just one time

Extracting information from a JSON dataset

Preset for Typescript in Babel 6

What is the best way to load the nested array attributes in an HTML table dynamically with AngularJS?

What could be causing the Angular router outlet to not route properly?

Combining Two Arrays Based on Unique Identifier

The issue lies with Express Mongoose failing to store the data