Make query parameter with vue router reactive

Question

I am trying to build a search page with Vue and I want the query text that the user enters in an input field to be reactive with the query parameter in the URL eg:

input: foo url: http://localhost:8080/search?query=foo

and if the user continues to type bar in the input field, I want to get the URL to updated to http://localhost:8080/search?query=foobar without the navigating via the router.

Decade Moon · Accepted Answer · 2018-09-10 05:21:14Z

6

If you make $route.query the source of truth, then when you want to mutate its value you just need to do a $router.replace() operation with the updated query value.

Off the cuff:

<input :value="$route.query.q" @input="onInput">

onInput(e) {
  this.$router.replace({
    query: {
      ...this.$route.query,
      q: e.target.value,
    }
  })
}

The ...this.$route.query is to preserve any other query parameters that may exist; if you only have q then it isn't necessary (also you may need to use Object.assign() instead since support for object spread syntax is patchy right now).

answered Sep 10, 2018 at 5:21

Decade Moon

34.4k8 gold badges84 silver badges104 bronze badges

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

Collectives™ on Stack Overflow

Make query parameter with vue router reactive

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