vue js pousse les paramètres vers l'URL

Question

J'utilise vuejs 3 et je souhaite filtrer les produits. Dans un premier temps, je souhaite envoyer des paramètres à l'URL et pour cela j'utilise vue router. Actuellement, mon filtre n'envoie qu'un seul paramètre à l'URL de chaque groupe, mais je souhaite ajouter tous les paramètres du premier groupe à l'URL, et à partir du deuxième groupe, je souhaite uniquement pousser un paramètre vers l'URL (moyenne ou grande)

Lorsque je sélectionne rouge et taille moyenne, mon filtre ressemble à ceci localhost:8080/filter?color=red&size=medium . Mais si je sélectionne deux couleurs, les deux couleurs doivent être ajoutées et mon URL doit être la suivante localhost:8080/filter?color=red&color=blue&size=medium 或 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

Vous devez créer les données pour cette application comme indiqué ci-dessous, urlParams pour obtenir les données chaque fois que quelqu'un clique sur une couleur ou une taille et y accède.

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

Il existe également quelques méthodes :

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)
      }, []) 
    }
  },

Modèles pour écrire des boucles de couleur et de taille :