push parameters to URL

I am using vuejs3 and I want to make a filter. When user click to the link I want to append the url and push it to browser address bar for now. Later I will do ajax request to update page with product list.

So far I am able to send parameters to URL, but only one item from one group.From first color group I want user to select only one but from second size group I want user to select multiple. I want this type of URL: localhost:8080/product?color=red&size=medium&size=large Any idea or suggestions would be great

<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>

aleahy

4 years ago

Level 25

I would have two methods - activateFilterWithReplace (for color) and activateFilterWithAppend (for size).

I would also use the URLSearchParams rather than a plain javascript object to create the query string. It lets you have the same key with different values like you want for size.

You can see the API for it here: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

You will want to look at URLSearchParams.set() for the color filter, URLSearchParams.append() for the size filter and URLSearchParams.toString() to create the query string.

1 like

david001

4 years ago

Level 5

thanks @aleahy I can use URLSearchParams, I checked the docs and I think it can be useful. would you mind to write little code/syntax based on your ideas, making two methods URLSearchParams.set() for the color filter, URLSearchParams.append() as you mentioned above

aleahy

4 years ago

Best Answer

Level 25

Keeping track of the filters is straight forward. Converting it into a format that the router would accept was less simple.

In your data method:

selectedFilters: new URLSearchParams()

For these functions you would need to put in your own checks for duplicate values, etc.

activateFilterWithReplace(key, value) {
		this.selectedFilters.set(key, value);
		this.updateRouter();
}

activateFilterWithAppend(key, value) {
		this.selectedFilters.append(key, value);
		this.updateRouter();
}

I couldn't figure out how to get the router to accept a straight query string, so we would need to convert it into an object.

updateRouter() {
		const queryObject = Array.from(this.selectedFilters.keys()).reduce((sum, value)=>{
    		return Object.assign({[value]: this.selectedFilters.getAll(value)}, sum);
		}, {});
		this.$router.replace({
			query: queryObject
		});
}

david001

4 years ago

Level 5

@aleahy thanks for help. One more thing i have to do is to remove duplication from URL

Please or to participate in this conversation.