How to pass multiple value with key to url using vue.js

Question

I have this attributes data

        for(var k = 0;k<this.form.fields.length;k++)
                    {
       
                        this.dynamic_fields.push({attribute_id:attributes[k].id,value: attributes[k].value})
                      
                    }

this.$router.push({ 
    path: '/api/search-temp',
    query:{
        attributes: this.encodedAttributes()                     
    }
});

    encodedAttributes() {
    const queryAttributes =this.dynamic_fields;
    if (queryAttributes) {
        return typeof queryAttributes !== "string"
            ? btoa(JSON.stringify(queryAttributes))
            : queryAttributes;
    }
    return "";
},

I have a attribute id and an attribute value so i want to pass this id and value to url so that i cab loop in my controller attributes array and get id and value :

localhost:8000..?attributes[]['attribute_id_1']=attributevalue1&attributes[]['attribute_id_2']=attributevalue2...

I'm redirecting like this :

 this.$router.push({ path: '/search-list',query:
                    {

                     
                    }

Issue is i want to pass this multidimentional array to url, anyother workaround for this is also highly appreciated

Answer 1

What you may try is to json stringify and encode the object before passing it to the $route query

function encodedAttributes() {
    const queryAttributes = this.$route.query.attributes;
    if (queryAttributes) {
        return typeof queryAttributes !== "string"
            ? btoa(JSON.stringify(this.$route.query.attributes))
            : queryAttributes;
    }
    return "";
}

function decodedAttributes() {
    const attributes = this.$route.query.attributes;
    if (typeof attributes === "string" && attributes.length) {
        return JSON.parse(atob(attributes));
    } else {
        return attributes;
    }        
}

And pass as query parameters to the route

this.$router.push({ 
    path: '/search-list',
    query:{
        attributes: this.encodedAttributes()                     
    }

Then in the Controller you can decode the attributes value from request data to get the associated array

class MyController extends Controller
{
    public function index(Request $request)
    {
        $request->attributes = is_array(
            $requestAttributes = json_decode(base64_decode($request->attributes), true)
        ) 
            ? $requestAttributes 
            : [];
        
        //Do other processing as needed
    }
}

Had used something similar in one of my projects can't get my hands on the code right now.

Probably you can use function to escape unicode characters in the encodedAttributes as well as decodedAttributes if need be

function escapeUnicode(str){
    return str.replace(/[^\0-~]/g, c => '\\u' + ('000' + c.charCodeAt().toString(16)).slice(-4))
}

function encodedAttributes() {
    const queryAttributes = this.$route.query.attributes;
    if (queryAttributes) {
        return typeof queryAttributes !== "string"
            ? btoa(escapeUnicode(JSON.stringify(this.$route.query.attributes)))
            : queryAttributes;
    }
    return "";
}


function decodedAttributes() {
    const attributes = this.$route.query.attributes;
    if (typeof attributes === "string" && attributes.length) {
        return JSON.parse(atob(escapeUnicode(attributes)));
    } else {
        return attributes;
    }        
}

Answer 2

You're trying to set a nested object to the query params, it's not possible... your route's query object must be a flat object.

Summarizing the only way for you to have something like this:

?attributes[]['attribute_id_1']=attributevalue1&attributes[]['attribute_id_2']=attributevalue2

Would be from a query object like this:

query: {
  "attributes[]['attribute_id_1']": 'attributevalue1',
  "attributes[]['attribute_id_2']": 'attributevalue2',
}

You should flatten this multidimensional array into an simples object and use it as your query object.

Here is an example...
From this:

const multiDimArr = [
  ['attribute_1', 'value1'],
  ['attribute_2', 'value2']
];

Into:

const myObject = {
  attribute_1: 'value1',
  attribute_2: 'value2'
}

A way to do so would be:

const multiDimArr = [
  ['attribute_1', 'value1'],
  ['attribute_2', 'value2']
];

const myObject = {};

multiDimArr.forEach(arr => {
  myObject[arr[0]] = arr[1];
});

And then use the object as the query object, so your url will look like this:

?attribute_1=value1&attribute_2=value2