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.
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.
Share Improve this question edited Jan 7, 2020 at 12:31 tereško 58.4k25 gold badges100 silver badges150 bronze badges asked Jan 7, 2020 at 11:48 Bhavin KalalBhavin Kalal 2141 gold badge2 silver badges13 bronze badges 6- 2 try sending JSON.stringify(this.stockmaster) and then parse it wherever you want to get it – Muhammad Usman Commented Jan 7, 2020 at 11:54
- how can we do this ? can you guide me with the code? – Bhavin Kalal Commented Jan 7, 2020 at 11:55
-
3
this.$router.push({ name: "SalesInvoice", params: { SalesInvoice: JSON.stringify(this.stockmaster ) } });. And please read aboutJSON.stringifyas well – Muhammad Usman Commented Jan 7, 2020 at 11:56 - thank you it really helped. – Bhavin Kalal Commented Jan 7, 2020 at 12:17
- 1 @MuhammadUsman You rock man, thaanks a lot. – rpajaziti Commented Aug 10, 2021 at 13:07
2 Answers
Reset to default 6Just adding my ment 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) }
});
For reference, I would not remend 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 mon 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.