How to set array URL query param in Vue with Vue-Router

Question

I am trying to set array query params with Vue-router, but I can't find a solution.

Currently the result is

http://localhost:8080/#/locations?page=1&categories=1&categories=2&categories=3

But my results should look like this

http://localhost:8080/#/locations?page=1&categories[]=1,2,3

This is my html

<router-link :to="{ path: 'locations', query: { page: 1, categories: [1,2,3] }}">
    {{ $root.trans.translate("locations") }}
</router-link>

Can you please tell me what do I need to do so my URL will be printed out as I wanted. If you need any additional informations, please let me know and i will provide. Thank you!

DobleL · Accepted Answer · 2018-03-06 18:22:52Z

3

You have to do it in your logic in order to work as you expected

this.$router.push({
  path: 'path',
  query: {
    page: 1,
    categories: [1,2,3]
  }
});

answered Mar 6, 2018 at 18:22

DobleL

3,9401 gold badge16 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Matt · Accepted Answer · 2018-03-06 18:17:51Z

2

Based on the source it looks like this behavior is hard-coded. You might want to open an issue.

if (Array.isArray(val)) {
  const result = []
  val.forEach(val2 => {
    if (val2 === undefined) {
      return
    }
    if (val2 === null) {
      result.push(encode(key))
    } else {
      result.push(encode(key) + '=' + encode(val2))
    }
  })
  return result.join('&')
}

answered Mar 6, 2018 at 18:17

Matt

44.1k6 gold badges105 silver badges103 bronze badges

3 Comments

Valor_ Over a year ago

hmmm, do you see any other option to pass an array of values trough get param?

Matt Over a year ago

Vue should decode the &foo=1&foo=2 back into an array. Is that not what you are seeing? Or do you not like how that format looks?

Valor_ Over a year ago

i was not satisfied with the forma. I already got answer. Thank you any way

alalonde · Accepted Answer · 2019-07-16 23:24:28Z

I worked around this by just JSON.stringifying the array and setting that directly as a string. Here's some relevant code:

// use when query params include values that are arrays
export function queryParamIncludes(key, value) {
    let rawValue = router.currentRoute.query[key];
    if (rawValue == null) {
        return false;
    }
    let arr = JSON.parse(rawValue);
    return Array.isArray(arr) && arr.includes(value);

}

// append a value to the array at the given key
export function appendQueryParam(key, newValue) {
    let rawValue = router.currentRoute.query[key];
    let arr = rawValue == null ? [] : JSON.parse(rawValue);
    arr.push(newValue);

    let newQuery = {
        ...router.currentRoute.query,
        [key]: JSON.stringify(arr)
    };

    router.push({
        query: newQuery
    });
}

// Remove any value of the array at the given key.
// If the resulting array is empty, delete the whole key-value pair.
export function spliceQueryParam(key, valueToRemove) {
    let rawValue = router.currentRoute.query[key];
    if (rawValue == null) {
        return;
    }
    let arr = JSON.parse(rawValue);
    if (!Array.isArray(arr) || !arr.includes(valueToRemove)) {
        return;
    }

    arr = arr.filter(v => v !== valueToRemove);

    let newQuery = {
        ...router.currentRoute.query
    };

    if (arr.length === 0) {
        delete newQuery[key];
    } else {
        newQuery[key] = JSON.stringify(arr);
    }
    router.push({
        query: newQuery
    });
}

Collectives™ on Stack Overflow

How to set array URL query param in Vue with Vue-Router

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related