CODEWITHSUNDEEP
javascriptphplaravelvue.js
Bhavin Kalal
Bhavin Kalal

Reputation: 214

How do I pass Array in $router.push in Vue.js?

I want to pass data through function of VUE to a new page on click of a button. I tried doing this thing using the router method but i was not able to send the array it was just allowing me to send a string with it.

this.$router.push({
    name: "SalesInvoice",
    params: { SalesInvoice: this.stockmaster }
  });

this thing is not working beacuse the stockmaster is an array.

this.$router.push({
    name: "SalesInvoice",
    params: { SalesInvoice: "abc" }
  });

the same thing i did with string and it worked. so is there any way of sending array to next page using vue method.

Upvotes: 9

Views: 13214

Answers (2)

Muhammad Usman
Muhammad Usman

Reputation: 10148

Just adding my comment as an answer so others can get it easily in the future.

When you are trying to pass an array, object or array of objects to the router, you should first stringify your data with JSON.stringify and the pass it to the router. And then you can access it and parse it back to JSON with JSON.parse. For the particular case above, something like following should be done

this.$router.push({
    name: "SalesInvoice",
    params: { SalesInvoice: JSON.stringify(this.stockmaster) }
  });

Upvotes: 6

Matthias S
Matthias S

Reputation: 3563

For reference, I would not recommend to use JSON as URL parameters, but rather use query parameters instead. If you want to send data from one request to the next, it is common to use query parameters instead of route parameters.

In your case, change the code to

this.$router.push({
    name: "SalesInvoice",
    query: { SalesInvoice: "abc" }
  });

You can then change your route definition to be something like this 

{
  path: 'sales-invoice', 
  name: 'SalesInvoice',
}

See, the path does not have any more :SalesInvoice in it. The route parameter is not necessary anymore, since you are now giving the data to the new route via query parameters. You can use as many query parameters as you like (actually, as many as the max length of a URL allows) without any need to define them in the route definition. This gives you more flexibility.

You can access query parameters similarly to route parameters by using this.$route.query.SalesInvoice.

Upvotes: 5

Related Questions