Vue.js passing array from one page to another

Question

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
    }
  ]
})

Possible duplicate of Vue: shared data between different pages — moon cheese
– moon cheese, Commented Nov 11, 2017 at 16:38
Show the code for the part where you do :selected-chairs="selectedChairs" as this is the right way to go and it should be working — webnoob
– webnoob, Commented Nov 11, 2017 at 18:32
@webnoob <router-link to="/order" :selected-chairs="selectedChairs" v-if="selectedChairs.length <= 20" class="button-v1" v-on:click="order"> Rezervovat </router-link> — xtrontross
– xtrontross, Commented Nov 11, 2017 at 18:38

webnoob · Accepted Answer · 2017-11-11 22:08:33Z

1

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.

answered Nov 11, 2017 at 22:08

webnoob

16k13 gold badges87 silver badges169 bronze badges

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

2 Comments

xtrontross Over a year ago

Thank you very much! Helped a lot. I used vuex and it's working just as I need it to :).

webnoob Over a year ago

Not a problem and glad to hear it.

N'Bayramberdiyev · Accepted Answer · 2020-01-30 20:03:51Z

0

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

edited Jan 30, 2020 at 20:03

N'Bayramberdiyev

3,6509 gold badges32 silver badges47 bronze badges

answered Jan 30, 2020 at 19:57

GeekyADAMS

1911 silver badge4 bronze badges

Collectives™ on Stack Overflow

Vue.js passing array from one page to another

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related