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

javascriptvue.jsnuxt.js

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

What is the process for retrieving data from a form input field?

I am currently working on a form that will dynamically populate with data from a database. Here's how it is supposed to function: the user inputs the company number, and then the form queries the database to see if the number exists. If it does, the c ...

javascriptphpajaxformsinput

To concatenate an array into a single line, you can use the JSON.stringify() method

Could someone help me with using JSON.stringify to keep my data on the same line in an array? I am aiming for a format like this: "alice": { "college": "Stanford", "favorite_color": "purple", "favorite_numbers": [7, 15] }, "dave": { "college": "H ...

javascriptjsonstringify

Learn the best way to populate Google Map popup windows with multiple values and include a button to pass unique ID values

I'm facing an issue with my code. When I click on a marker, it should display "Madivala, 12.914494, 77.560381,car,as12" along with a button to pass ID values. Can someone help me figure out how to move forward? http://jsfiddle.net/cLADs/123/ <ht ...

javascriptangularjsgoogle-maps

How does reactjs distinguish between render and return?

I am a beginner in the world of JavaScript. I often come across the terms "return" and "render" in various contexts, but I'm curious about their differences. ...

javascriptreactjs

Error encountered while attempting to download PDF file (blob) using JavaScript

Recently, I have been utilizing a method to download PDF files from the server using Laravel 8 (API Sanctum) and Vue 3. In my Vue component, I have implemented a function that allows for file downloads. const onDownloadDocument = (id) => { ...

javascriptvue.js

Challenge with JavaScript personalized library

No matter how many times I review my code, I find myself perplexed. Despite my efforts to create a custom library of functions from scratch (shoutout to stackoverflow for guiding me on that), the results are leaving me puzzled. A javascript file is suppose ...

javascriptjquerypostgresqlpg-jdbc

Can someone clarify the meaning of (e) in Javascript/jQuery code?

Recently, I've been delving into the world of JavaScript and jQuery to master the art of creating functions. I've noticed that many functions include an (e) in brackets. Allow me to demonstrate with an example: $(this).click(function(e) { // ...

javascriptjqueryfunctionparametersparameter-passing

Why is my Vue/MySQL Database not showing up online, even though it is accessible locally?

While my application runs smoothly locally, I encounter an issue when deploying to the Heroku server. The page contents linked to the MySQL Database fail to display without any CORS errors or fetch call issues in Chrome Dev Tools. The page loads, but remai ...

mysqlvue.jsexpressserver

How is it possible for this variable to be altered without any modifications made to it in the current function?

This particular function receives two arrays as input: arrOne, which is an array comprising arrays of numbers, and arrTwo, which is an array containing numbers. My goal here is to generate every possible combination, followed by obtaining the unique combin ...

javascriptarraysfunctionvariables

Ways to prevent the repetition of keys associated with values

I am currently dealing with an array called serialNumbers, which can have different structures. For example: lot: 1 Serial: 2 lot: 1 Serial: 3 lot: 1 Serial: 4 ...or it could look like this: lot: 1 Serial: 5 lot: 1 Serial: 9 lot: 8 Serial: 2 lot: ...

javascriptvue.js

jQuery does not support iterating over JavaScript objects

Here is the code snippet I am working with: $(obj).each(function(i, prop) { tr.append('<td>'+ i +'</td>' + '<td>'+ prop +'</td>'); }); Intriguingly, the data in $(obj) appears as: Obje ...

javascriptjqueryhtml

Modifying the content within a DIV element

I want to make changes to my DIV. <div id="main"> <div id="one"> <div class="red"> ... </div> <img class="avatar" src="img/avatar1.jpg"/> <span class="name"> John < ...

javascriptjqueryhtmldomweb

Connect or disconnect an element to a JavaScript event handler using an anonymous function

I'm stuck on a basic issue... I have a custom metabox in my WordPress blog, and here's my event handler: jQuery('tr input.test').on('click', function( event ){ event.preventDefault(); var index = jQuery(this).close ...

javascriptjquery

Table cell featuring a status menu created with Material UI DataGrid

I'm looking to include a column called "Filled Status." Although I've checked the documentation, I can't quite figure out how to do it. It seems like I may need to use renderCell when setting up the column, but I'm not sure how to make ...

javascriptnode.jsreactjsmaterial-uijsx

Using Laravel for login with the option to choose from multiple usernames

I am looking to enhance my Laravel VueJS application by allowing users to log in using their username and registration number instead of just an email. I have successfully implemented this functionality by modifying the username function within the Authent ...

phplaravelvue.jsauthenticationinertiajs

What are the distinctions between manually and programmatically changing URLs in Angular 6?

My query pertains to differentiating navigation methods, specifically between clicking a button with [routerLink] and manually entering a URL in the browser's search bar. Update: I have a fixed menu on a certain page that appears as follows: <ul& ...

javascriptangular

retrieving dynamic data from an HTML form to JavaScript

Currently, I am dynamically adding elements using JavaScript. The count is defined and increases by one. <span style="margin-left:10px;">File Type : <select name="select_type_'+count+'" > <option value="select">Select</optio ...

javascripthtml

Implementing the Same Vue Component with Different Path Names

Is there a more efficient way to have different URLs (Consumer and Seller) for the same SingleProduct component? The initial method works well: const routes = [ { path: "/:name", name: "SingleProductSeller", component: SingleProduct }, { ...

vue.jsurlpathroutesvue-router

How to determine if a scrolling action is initiated manually using jQuery

Here is a question that was previously asked long ago: Detect jquery event trigger by user or call by code Despite previous inquiries, a conclusive answer has not been provided (or I may just be inadequate at searching). My query pertains to distinguish ...

javascriptjqueryeventsscrolljquery-events

Is there a way to allow users to edit all the input fields within the td elements when they click the edit button for a specific row?

I am completely new to web dev and I'm struggling with what should be a simple task. My goal is to enable editing of all inputs in a table row when the edit link is clicked. Since I am not using jQuery, I prefer a pure JavaScript solution if possible. ...

javascripthtmlnode.jsexpressejs