How do I update my data based on the query parameter in vue-router

Question

I am new to vue-router and I am facing this problem. Here is my code;

filter() {
      this.$router.push({
        query: {
          bathrooms: this.selectedBathroom,
          beds: this.selectedBed,
          minPrice: this.selectedMinPrice,
          maxPrice: this.selectedMaxPrice,
          minLandSize: this.selectedMinLandSize,
          maxLandSize: this.selectedMaxLandSize,
          minLotSize: this.selectedMinLotSize,
          maxLotSize: this.selectedMaxLotSize,
          minYear: this.selectedMinYear,
          maxYear: this.selectedMaxYear,
        },
      })
    }

when user clicks on the filter button, the filter method is run. But the data doesn't update and when the user goes back to the previous page, the the query params is removed, but the data isn't updated. Is they a way I can work around with this?

can you clarify more?, when you say the data doesn't update are you referring to the params? — Evan
I am making a request to sever based on the params value. So when call the method, I am expecting the data from the sever to be updated. — user10031694

Jason Gross Jason Gross · Accepted Answer · 2020-11-14T00:35:02

There is no path or name value here to actually initiate a change to the page route. If you want to simply reload the existing page with a new set of query parameters see this information from the documentation:

Note: If the destination is the same as the current route and only params are changing (e.g. going from one profile to another /users/1 -> /users/2), you will have to use beforeRouteUpdate to react to changes (e.g. fetching the user information).

In your comments you mentioned that you are making a request to a server. It's hard to give a full answer without more code from your application but query parameters might not be the most straightforward way to approach your problem. You should explore setting up a fetch request in your method or using axios to interact with the server (assuming you're communicating via an API) to build a more reliable and better scaling communication pattern.

How do I update my data based on the query parameter in vue-router

1 Answers