CODEWITHSUNDEEP
javascriptrestvue.jsvuejs2vue-router
Evgeny Malkov
Evgeny Malkov

Reputation: 477

Vue.js, pass data to component on another route

Simple task to pass data from one page to another made a real headache to newbie in Vue.js Here is my router enter image description here

I'm rendering a form on "/" page, which make an API request, enter image description here

and I just want to pass data to another route page with another component enter image description here

Is it so hard to do in Vue? It made a real headache for me today. Get data from API, save & send to another component. How can I do it?

Upvotes: 15

Views: 26250

Answers (4)

Shamaz saeed
Shamaz saeed

Reputation: 446

Add props true in your vue router


{
    path: "/pay-now",
    name: "pay",
    props: true,
    component: () =>
      import(/* webpackChunkName: "about" */ "../components/account/pay.vue"),
    beforeEnter: AuthGuard,
  },

After that pass props with router like that

        this.$router.push({ 
        name: "pay",
        params: {
        result:this.result,
      }
      });

Upvotes: 0

user7153178
user7153178

Reputation:

Try using Vuex

In Source Component

this.$store.commit('changeDataState', this.$data);
this.$router.push({name: 'user-post-create'});

In Destination Component

created () {
    console.log('state', this.$store);
    this.$store.getters.Data;
}

Upvotes: 1

choasia
choasia

Reputation: 10882

As Antony said, since you've already enabled props in router/index.js, you can pass parameters in router.push like this:

router.push({
    name: 'events',
    params: {
        items: data
    }
});

then you will be able to receive items as props in EventsDisplay.vue

export default {
    name: 'eventsDisplay',
    props: ['items'],
};

Upvotes: 16

Antony
Antony

Reputation: 1273

If you want to save it globally, you could use an event bus or a VueX store to contain it, then save and load it from this event bus or store when you need to access it.

If you want to pass it between those two components only, and only when accessing the second page from the first one, you can pass properties to the route argument as per this guide: https://router.vuejs.org/en/essentials/passing-props.html

Upvotes: 2

Related Questions