Using Vue.js 3, I am working on filtering products. My goal is to send parameters to the URL for filtering and I am utilizing Vue Router for this purpose. At the moment, my filter only sends one parameter to the URL from each group. However, I aim to append all parameters to the URL from the first group, and from the second group, I want to include only one parameter (either medium or large).
Currently, my filter output looks like this
localhost:8080/filter?color=red&size=mediumlocalhost:8080/filter?color=red&color=blue&size=mediumlocalhost:8080/filter?color=red&color=blue&size=large <template>
<div class="products">
<div class="multi_filters">
<h1>Multi Filter By Color</h1>
<a href="#" @click.prevent="activateFilter('color','red')">Red color</a>
<a href="#" @click.prevent="activateFilter('color','blue')">Blue color</a>
</div>
<div class="single_filter">
<h1>Multi Size</h1>
<a href="#" @click.prevent="activateFilter('size','medium')">Medium</a>
<a href="#" @click.prevent="activateFilter('size','large')">Large</a>
</div>
</div>
</template>
<script>
export default {
data() {
return {
filters:{},
selectedFilters:{}
}
},
methods:{
activateFilter(key,value){
this.selectedFilters = Object.assign({},this.selectedFilters,{[key]:value})
console.log(this.selectedFilters)
this.$router.replace({
query: {
...this.selectedFilters
}
})
}
}
}
</script>