0

I want to bind a dropdown to a query parameter in the URL, so

  • when opening /page?dropdown=foo, I want the dropdown to have foo pre-selected
  • and the other way round: when changing the dropdown's value to bar, to have the URL rewritten into /page?dropdown=bar.

My question now:
Is there an out-of-the-box way to tell vue-router to data-bind this?

Or do I need to do it by hand, so when entering/changing the route, setting the dropdown's value and using a :onchange on the dropdown to call router.replace()?

theHacker
  • 3,984
  • 1
  • 19
  • 34

1 Answers1

1

As far as I know, you can't bind it in the way you are thinking, but for sure there is a manner to achieve that.

On router config, it's possible to set props as true, which means that the route.params will be set as the component props, so dropdown will be set with the value on URL (foo or bar).

Make your component react to changes on prop dropdown, this can solve your first question.

For the second question, I think your approach is correct, using the replace method, which would change the URL, and navigate to it but without adding a new history entry, just replacing it.

Luis de Brito
  • 692
  • 4
  • 7