When a user selects a value from a dropdown, it is pushed to the URL. If the page is refreshed, the dropdown should default to the selected value in the URL. This functionality is being implemented in Laravel. I have attempted the following approach, but when I refresh the page after selecting a dropdown value, the dropdown resets.
<template>
<div class="mt-2">
<select class="form-control" v-model="filter.size">
<option value="">............</option>
<option value="big">Big</option>
<option value="small">Small</option>
</select>
</div>
<template>
<script>
export default {
data() {
return {
filter: {
size: this.$route.query.size,
},
};
},
mounted() {
},
watch: {
filter: {
handler() {
this.$router.push({
query: this.filter,
});
},
deep: true,
},
},
};
</script>
route
routes: [
{
path: '/home',
component: App,
name: App,
},
],
view:registered here
<div class="card-body">
<search> </search>
</div>