I am looking for a way to connect a dropdown menu with a query parameter in the URL. Specifically, I want it so that when the page is opened with /page?dropdown=foo
, the dropdown automatically displays "foo" as selected. On the other hand, if I manually change the dropdown value to "bar", I want the URL to reflect this change by becoming /page?dropdown=bar
.
My main question now is whether there is a built-in method in vue-router that can handle this data-binding process. Or do I need to manually code the logic myself, such as setting the dropdown value upon route entering or changing, and using an :onchange
event on the dropdown to trigger router.replace()
.