Vue.js Router Query Array

Question

I'm trying to do is pass an array from query to the backend using Vue.js and router.

So I have this method:

submitForm () {
  this.$router.push({
    name: 'AuctionResult',
    query: {
      models: this.selectedModels.map(e => e.value)
    }
  })
},

As a result will be query like this: ?models=MODEL1&models=MODEL2... But how can I make inputs look like array, like this: ?models[]=MODEL1&models[]=MODEL2... ???

I didn`t find anything in the documentation.

Answer 1

To support PHP / array style multi-values, you can just set the key name to be what you want, ie

query: {
  'models[]': this.selectedModels.map(e => e.value)
}

This may come out as

?model%5B%5D=MODEL1&model%5B%5D=MODEL2...

but that's fine (it's just URL encoded) and your server-side request handler should decode it correctly.