CODEWITHSUNDEEP
vue.jsvue-router
Mistre83
Mistre83

Reputation: 2827

Vue router - Handle query params

I have a <search-bar> component that have some dropdown that i will use as filter search. When I press the submit button i run the following code:

search() {
  let query = {
      status: this.selectedOrderStatus
  };

  this.$router.push({ path: '/', query: query })
}

This will chage my url as: http://localhost:8080?status=1 or http://localhost:8080?status=2 and its ok.

In another component (that is the / component) i have place a watch to handle url change, like this:

watch: {
 '$route': 'loadOrders'
},

So, when in my dropdown i choice a value, the component is reloaded.

But, if i'm on url http://localhost:8080?status=1 and i press submit button nothing happen. I have to choice another value (for example 2) to make the reload.

How i can handle the reload every time i press the submit button? Because, i would like to press "Submit" again, using the same parameter.

Upvotes: 0

Views: 2876

Answers (1)

Cristi Jora
Cristi Jora

Reputation: 1752

Since you don't change the query params upon submit, Vue doesn't detect changes and respectively doesn't reload your component. For your case I would recommend calling your loadOrders directly from where you have the submit form.

Emit an event when you click submit and try not to rely on the route. https://v2.vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication

Upvotes: 1

Related Questions