Vue router: Dynamically set query key inside router.push()

Question

I am new to Vue and I have created a project where I perform GET-requests based on current URL.

I have a function where I want to be able to set the dynamic value of filterType to the query key inside the router.push().

The function I have now just pushes filterType as a string. Ive been researching and havent found any answers regarding this issue. Grateful for any input or wisdom.

setFilter(filterType, filterValue){
    if(filterValue){
        this.$router.push({ query: Object.assign({}, this.$route.query, { filterType: filterValue })}).catch(err =>{});
    }
    else {
        let query = Object.assign({}, this.$route.query);
        delete query.filterType;
        this.$router.replace({ query }).catch(err =>{});
    }
},

Answer 1

Assign it as a key to the query object:

if(filterValue){
  const query = this.$route.query
  query[filterType] = filterValue
  this.$router.push({path:'/', query:query})
}

Answer 2

Try this code

let newQuery = {filterType: filterValue};
this.$router.push({name: 'route-name', query: {...this.$route.query, ...newQuery}})