vue js append parameters to URL

Question

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

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

The `Object.assign` within your `activateFilter` assigns a new value to a key. As for `color`, you only accept one possible option, it's perfect. But as for `size` you want to accept an array, this won't work. You've to rethink how you'll store the selected filters. Did you check to work with 'chip groups' like in Vuetify (although they're still in beta for version 3) https://next.vuetifyjs.com/en/components/chip-groups/ — W.S., May 25 '22 at 05:59

score 0 · Answer 1 · answered May 25 '22 at 07:56

You are expecting size to be an array, this post will helps.

Submitting multi-value form fields, i.e. submitting arrays through GET/POST vars, can be done several different ways, as a standard is not necessarily spelled out.

Three possible ways to send multi-value fields or arrays would be:

?cars[]=Saab&cars[]=Audi (Best way- PHP reads this into an array)
?cars=Saab&cars=Audi (Bad way- PHP will only register last value)
?cars=Saab,Audi (Haven't tried this)

this is backed, I am looking for frontend end solution without refreshing the page – — saj sta, May 28 '22 at 05:01

vue js append parameters to URL

1 Answers1