vue-router: Array in query is not correct while pushed

step:

1. url: /list

2. js: router.push({query: {a:[1]}}) // url: /list?a=1

3. refresh chrome

4. js: console.log(route.query.a) // 1, expected: [1]

On address bar not didn’t do the difference between new Array(1) and string

@posva

expected: $route.query.x = [1] ,but: $route.query.x = 1 ，this is the key @posva

Soo if I want to access the parameter from php, for example after a page refresh, it will not act as an array of items? Edit: Yeah, it just overrides all with the last parameter.

In the future, we will provide a way of overwriting the query parser with a custom one like qs

OK so workaround I thought of is to send a comma separated list of values and explode that on the server. To still be able to use the value with v-model and a checkbox for example I did a computed property with a setter and getter as follows:

// Use this because Array.split() on empty string returns [''] which is not what we need atm.
function split (string, sep) {
  const a = string.split(sep)
  if (a[0] === '' && a.length === 1) return []
  return a
}
// the computed prop
arrayItem: {
      get () {
        return split(this.query.arrayItem, ',')
      },
      set (value) {
        this.query.arrayItem = value.toString() // Convert the Array to comma sep. string
      }
    }

Now we can just use arrayItem with v-model in our templates.

no, you actually have [1]: https://jsfiddle.net/posva/gnk3a044/1/

it’s just a valid choice. You can use a different syntax by plugging in qs (check queryParser at https://router.vuejs.org/en/api/options.html )

On Mon, Nov 6, 2017 at 11:51 AM Andy notifications@github.com wrote:

@posva https://github.com/posva hey there! Just a question… I’ve come up with this issue too.

Just wondering… couldn’t find it anywhere…why have you guys taken this approach vs the &something[]=n& approach?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/vuejs/vue-router/issues/1232#issuecomment-342113455, or mute the thread https://github.com/notifications/unsubscribe-auth/AAoicTmuyvKghqRCZsqPQbn2_K8xyplQks5szuS9gaJpZM4MWj18 .

–

Eduardo San Martin Morote