Parameter Url Vue Js

0
votes

I am trying to build a filter component with Vue , example i have 2 input form 1. Min Price and 2 Max Price and I want the query text that the user enters in an input field to be reactive with the query parameter in the URL example i input min price : 1000

localhost/minprice=1000

when i input maxprice : 2000 the url be like :

localhost/minprice=1000&maxprice=2000

how to add multiple query parameter in the address without change the last parameter url i have ?

thanks

1
vue.js

1 Answers

0
votes

You can add a submit button, and then create a URL with query parameters using bound data, finally set the location object.

// in click handler
const url = `localhost://thePage?minprice=${this.minPrice}&maxprice=${this.maxprice}`

IMO it might be better to use the hash part of the URL, instead of query param, so the page does not need to reload. 

const url = `localhost://thePage#minprice=${this.minPrice}&maxprice=${this.maxprice}`

You would filter in your component (without refreshing), and also set the hash. Then if the user refreshed or bookmarked, the filter would be persisted. window.location.hash = ...

Either way, you would read the URL properties when loading your component and set the bound properties to them.