CODEWITHSUNDEEP
vue.jsvue-routervuejs3
Joel G Mathew
Joel G Mathew

Reputation: 8071

How to pass an object directly in a prop through Vue Router?

In Vue JS3, my Vue component, I can pass props like this: Parent:

<script>
export default {
data() {
    return {
    links: [],
    };
},
methods: {
    editLink(el) {
    this.$router.push({
        name: "EditLink",
        params: {
        id: el.id,
        short_link: el.short_link,
        long_link: el.long_link,
        },
    });
    },
},
};
</script>

Component:

<script>
export default {
props: ["elem"],
data() {
    return {
    link: {},
    };
},
mounted() {
    this.link = {
    id: this.$route.params.id,
    short_link: this.$route.params.short_link,
    long_link: this.$route.params.long_link,
    };
},
};
</script>

But If I pass the Object named el directly like this:

this.$router.push({
    name: "EditLink",
    params: {
        elem: el,
    },
});

When I try to print it out, I get the value of elem as [Object Object], instead of an actual object. Why is this happening? What's the solution?

Upvotes: 1

Views: 73

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

Try out to spread the el instead of assigning each value to the respective key :

    this.$router.push({
        name: "EditLink",
        params: {...el},
    });

then in the target page :

mounted() {
    this.link = {...this.$route.params};
},

Upvotes: 1

Related Questions