vue js push parameters to URL

Question

I'm using vuejs 3 and I want to filter products. In the first stage I want to send parameters to the URL and for this I use vue router. Currently my filter only sends one parameter to each group's URL, but I want to append all the parameters from the first group to the URL, and from the second group I only want to push one parameter to the URL (medium or large)

When I select red and medium size, my filter looks like this localhost:8080/filter?color=red&size=medium . But if I select two colors it should append both colors and my URL should be like localhost:8080/filter?color=red&color=blue&size=medium or localhost: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>

Answer 1

You should create the data for this app like below, urlParams to get the data every time someone clicks on a color or size and push to it.

data() {
    return {
      colors: [{id:1, name: "red" }, {id:2, name: "blue" }],
      sizes: [{id:1, name: "medium" }, {id:2, name: "large" }],
      urlParams: []
    };
  },

There are also some methods:

methods: {
    activateFilter(e) {
      //get color or size with condition not exist.
      if(!this.urlParams.includes(e)){
        this.urlParams.push(e);
      }

      //create params url
      const urlParam = this.urlParams.reduce((contains, current) => {
        if(this.createArrName(this.colors).indexOf(current) > -1){
          return contains += `color=${current}&`
        }else{
          return contains += `size=${current}&`
        }
      }, '')

      //adapt to url
    },
    createArrName(arrs) {
      return arrs.reduce((contains, current) => {
        return contains.concat(current.name)
      }, []) 
    }
  },

Your template for writing color and size loops: