Vue router - Handle query params

Question

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.

Consider using vue-router's navigation guards.

jingman
– jingman

2017-02-05 20:38:47 +00:00
Commented Feb 5, 2017 at 20:38 — jingman
– jingman, Commented Feb 5, 2017 at 20:38

tony19 · Accepted Answer · 2022-07-15 04:21:11Z

1

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

edited Jul 15, 2022 at 4:21

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 5, 2017 at 20:39

Cristi Jora

1,75215 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue router - Handle query params

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related