CODEWITHSUNDEEP
javascriptvue.jsvue-router
xtrontross
xtrontross

Reputation: 191

Vue.js passing array from one page to another

I'm using vue.js and I have one component, where the user selects what they want and then they hit "order". At this moment I use <router-link to="/order"> to show new page. But I don't know how to access the array from the previous component there. I tried something like this :selected-chairs="selectedChairs" and in the other component this props: ['selectedChairs'], but it doesn't work. My routes file (index.js):

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Select',
      component: Select,
      props: true
    },
    {
      path: '/order',
      name: 'Order',
      component: Order,
      props: true
    }
  ]
})

Upvotes: 0

Views: 5530

Answers (2)

GeekyADAMS
GeekyADAMS

Reputation: 191

The above answer is correct but will show a blank page on page load.

To solve that, DO:

export default new Router({
    routes: [{
      path: '/order/:selected-chairs?',
      name: 'Order',
      component: Order,
      props: true
    }]
}

As you can see, I added a question mark (?) to the front of the path parameter

Upvotes: 0

webnoob
webnoob

Reputation: 15934

It's possible to do what you want to do but I don't think it's a good idea. First, in line with your original question, this is what you could do:

Set up your order route:

export default new Router({
    routes: [{
      path: '/order/:selected-chairs',
      name: 'Order',
      component: Order,
      props: true
    }]
}

You could then have a link like so: 

<router-link :to="'/order/' + JSON.stringify(mySelectedChairs) + '">Link Text</router-link>

or you could do 

<router-link :to="{path: 'order', query: { selected-chairs: mySelectedChairs }}">Link Text</router-link>

This would allow you to access that data on your component using: 

this.$route.params.selected-chairs

or

this.selectedChairs // because props: true binds to the props

This page has more information on passing params using router-link: https://router.vuejs.org/en/api/router-link.html

As I said, I don't think this is a good idea. Even if you're not using Vuex, you're much better off doing this using some sort of stateful component. You could then set the selected-chairs in your state and the order component would just know about them being selected. This allows you to do things like having a mini basket that reacts to users entering stuff into their baskets etc.

Setting up a simple Vuex system isn't complicated and there are various articles on the web to help that would be my recommended approach.

Upvotes: 1

Related Questions