vue js tolak parameter ke URL

Question

Saya menggunakan vuejs 3 dan saya ingin menapis produk. Pada peringkat pertama saya ingin menghantar parameter ke URL dan untuk ini saya menggunakan penghala vue. Pada masa ini penapis saya hanya menghantar satu parameter ke URL setiap kumpulan, tetapi saya mahu menambahkan semua parameter daripada kumpulan pertama ke URL, dan daripada kumpulan kedua saya hanya mahu menolak satu parameter ke URL (sederhana atau besar)

Apabila saya memilih saiz merah dan sederhana, penapis saya kelihatan seperti ini localhost:8080/filter?color=red&size=medium . Tetapi jika saya memilih dua warna ia harus menambahkan kedua-dua warna dan URL saya hendaklah seperti berikut 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

Anda harus mencipta data untuk apl ini seperti yang ditunjukkan di bawah, urlParams supaya setiap kali seseorang mengklik pada warna atau saiz ia mendapat data dan menolaknya.

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

Terdapat juga beberapa kaedah:

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

Templat untuk anda menulis gelung warna dan saiz: