What is the best way to route a localpath to a different page including parameters in Nuxt Js?

Hello, I am facing an issue where I need to pass parameters in the URL to another page in NuxtJs

props: {
    idPending: {
      type: Number,
      required: true
    }
},

methods: {
    fetchpage() {
      const orderId = this.idPending;
      this.$router.push(
        this.localePath({
          name: 'Checkout-Confirmation-orderId', // page with params orderId
          params: { orderId: orderId }
        })
      );
    }
  }

However, when I try to do that, I encounter an error that I'm struggling to understand

Argument type {name: string, params: {orderId: Number}} is not assignable to parameter type RawLocation   Type Number is not assignable to type string 

Could someone please provide assistance? Thank you very much

Answer №1

The issue is quite clear, you can only use a type of String in this context.
For more information, refer to this link: https://github.com/vuejs/vue-router/issues/2895#issuecomment-523549070

Instead of directly using orderId, consider using String(orderId). This approach may offer better efficiency and enhanced safety by avoiding errors in cases where the orderId is null or undefined.

Answer №2

Providing a Solution

In response to my own query, I have discovered that when passing parameters between pages, they must always be of type String. In my specific situation, the props id is of type Number which caused an error. To resolve this issue, I am converting the type to String in the params as shown below:

fetchpage() {
      const orderId = this.idPending;
      this.$router.push(
        this.localePath({
          name: 'Checkout-Confirmation-orderId', // page with params orderId
          params: { orderId: orderId.toString() }
        })
      );
    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieving the content of input elements within a div post removal

I have a situation where I need to dynamically add input text fields inside a div and then delete the div while retaining the values of the input field in a variable. Here's an example code snippet that demonstrates this: $(document).ready(funct ...

Using jQuery Plugin for Date Operations

I am in search of a jQuery tool that can assist me with date manipulations, such as: 1) Adding a specific number of days to a date and obtaining a new Date. 2) Determining the week of the year for a given date. 3) Calculating the number of days between two ...

Using an array as a route parameter triggers a "Expected to not repeat" warning

Every time I attempt to set up a router-link with an array as the parameter, the link functions properly but triggers the following warning : "Missing param for named route "start-run": Expected "files" to not repeat, but received ["aaa"] router.js .. ...

What could be causing the sluggish performance of my JavaScript code?

Could someone offer insight into why my JavaScript code is performing slowly? Are there any optimizations I can implement to improve its speed? Thank you! $(document).ready(function() { /* Trigger animation when window is scrolled */ $(window).scroll( ...

Using the _id String in a GraphQL query to retrieve information based on the Object ID stored in a

Encountering an issue with my graphql query not returning anything when sending the _id as a string. Interestingly, querying the DB using any other stored key (like name: "Account 1") works perfectly and returns the object. I've defined my Account sch ...

Increase in textbox size depending on selected dropdown value

Our concept involves offering three choices: Email #1 pulled from the database Email #2 retrieved from the database Input a new email Should the user select option #3, a textbox will expand at the bottom of the dropdown menu for easy entry of a new emai ...

Encountering a Module not found error with a ValidationError when trying to import an SVG file within a React

I've set up a manual Webpack 5 configuration for my React project with TypeScript. I am facing an issue while trying to import an SVG icon and using Material UI in the project. The error message I'm encountering is: Module not found: ValidationEr ...

Choose2 - Dynamic search with auto-complete - keep track of previous searches

Currently, I am utilizing Select2 version 3.5.1 and have successfully implemented remote data loading with the plugin. However, I have a query regarding enhancing the search functionality. Below is a step-by-step explanation of what I aim to achieve: Cre ...

Obtain the number of elements rendered in a React parent component from a switch or route

I'm currently working on a component that is responsible for rendering wrapper elements around its children. One challenge I'm facing is determining which elements are actually being rendered as children. I've implemented functions to ignore ...

Mobile website scroll assistant

Seeking a solution to aid mobile users in scrolling through a lengthy article page. Typically in mobile apps, an alphabetical index assists users in navigating long lists. How can I incorporate a similar feature into a webapp? For context, my tech stack i ...

Understanding the process of parsing an array in form-data in Node.js

https://i.stack.imgur.com/FPhX1.png I'm currently facing an issue while trying to read the image above in Node.js. I am using Express.js and have attempted to debug req.body, but it is returning an empty object {}. Even though I am using app.use(bod ...

Can terminating a POST XHR request be trusted?

Running an apache server with PHP 5.4. I've set up a form that sends an asynchronous request to the server and stops any previous requests if the button is clicked again before the current request is completed. If I repeatedly click the button quick ...

Guidance on Implementing a Delay and FadeIn Effect for AJAX Responses from JSON Iterator

How can I iterate over the following foreach loop with a delay between each item and a fadeIn effect on each? I am debating whether .append() is the most suitable function to use since I want to load a templated div with the class #fan for each person in ...

Acquiring the underlying code of websites within the local network

In the tool I am creating, it takes a URL as a parameter and retrieves the source code from that URL for analysis. The tool will be hosted on our domain, with the capability of analyzing web pages of sites within our internal network domain. Here is the Jq ...

Issue with accessing $index.$parent in function parameter within ng-repeat in AngularJS

Can anyone with more experience please explain to me why this particular code compiles successfully: <li class="btn dropdown top-stack breadcrumb-btn" ng-repeat="nodeName in selectedNodeNames"> <a class="dropdown-toggle btn-anchor"> ...

Attempting to develop a worldwide npm package. Upon running my script, I encounter the message "The designated path cannot be found."

I have been working on converting my npm module into a global command. You can find the code at this link. However, when I try to run $ seed, an error stating "The system cannot find the path specified" is displayed, indicating that it recognizes it as a ...

How can I implement the dynamic loading of components using the Vue 3 composition API?

My goal is to dynamically load a component with the name retrieved from the database, however, I keep encountering the error [Vue warn]: Component is missing template or render function. import SimpleQuestions from '@/components/SimpleQuestions.vue&ap ...

I am experiencing difficulty with the Click() operation in Selenium web driver as it is not successfully redirecting me to another page

Hello everyone, I could really use your assistance with a problem I'm facing. WebElement wb=driver.findElement(By.name("NavHeader1$tabs$ctl00$btnNavHeaderTab")); Actions act=new Actions(driver); act.moveToElement(wb).perform(); ...

Blur function not performing as anticipated

I am attempting to achieve a blur effect on a dialog pop-up. Currently, I am using the primeng p-dialog component for this purpose. <p-panelMenu [model]="items" [style]="{'width':'300px'}"></p-panelMenu> <p-dialog head ...

Why is the parameter declared if its value is never even used? Seems redundant

When trying to send an email, I've encountered an issue with my controller method: const send = function (subject, template, to, options) { // While VSC points out that "subject" is declared but its value is never read, // it does not signal ...