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.

Phil · Accepted Answer · 2018-06-05 04:46:58Z

6

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.

answered Jun 5, 2018 at 4:46

Phil

166k25 gold badges265 silver badges269 bronze badges

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

Collectives™ on Stack Overflow

Vue.js Router Query Array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related