Currently, I am working on a filter feature where I need to append query parameters to the URL based on user selections. If a user chooses a specific option, I want to modify the query string accordingly. Here's an example of my current URL structure:
If the user selects 'wfh' instead of 'onsite' for 'preference', I would like to remove 'place' from the URL and have it look like this:
Below is a snippet of the code I'm using:
<template>
<div>
<div class="mt-2">
</div>
<div class="mt-2" v-if=" this.$route.query.preference == 'onsite'">
<label>Available for work</label>
<div class="form-control" >
<input type="text">
<div class="options" style="max-height:140px;overflow:scroll">
<ul class="" style="max-height:40px;">
<li v-for="place in places" :key="place.id">
<input type="checkbox" v-model="filter.place"
:value="place.name">{{ place.name }}
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
places: [
{
id: 1,
name: "Aus",
},
{
id: 2,
name: "Mus",
},
],
filter: {
preference: this.$route.query.preference,
place:[],
},
};
},
watch: {
filter: {
handler() {
const query = this.filter
this.$router.push({
query: query,
});
},
deep: true,
},
},
};
</script>
In an attempt to update the URL when the preference is 'wfh', I wrote the following code snippet, but unfortunately, it's not functioning as expected:
if (this.$route.query.preference == 'wfh') {
this.$route.query.place='';
this.$router.replace({ query: query });
}