Sending object as a props in Vue.js and getting TypeError and Warning

Question

I am trying to pass an object into my child component but it comes undefined. So my parent component:

<template>
    <section id="cart-page" class="row">
        <div v-for="items in cart" :key="items.product.id">
            <div class="col-lg-8 col-md-12 col-sm-12 col-xs-12">
                <div class="title">WARENKORB</div>
                <SoldTickets :items = "items"/>
            </div>
        </div>
    </section>
</template>
<script>
import image from "../../../../img/Hallenbad.jpg";
import CheckBox from "../components/CheckBox";
import SoldTickets from "../components/SoldTickets";
export default {
    components: {
        CheckBox,
        SoldTickets,
    },
    data(){
        return {
            image: image,
        };
    },
    computed: {
        cart() {
            return this.$store.state.cart;
        },
    },
};
</script>

So I store cart into Vuex store and I am taking it right and it is an object like in the below:

So I want to send this cart.attributes.items object to SoldTickets component to display them inside of the component.

<template>
    <div id="sold-tickets">
        <div class="card">
            <div class="sold-tickets-actions">
                <div class="sold-tickets-inner">
                    <img class="sold-tickets-image" :src="image" alt="Sold Ticket"/>
                </div>
            </div>
            <div class="sold-tickets-actions properties">
                <div class="sold-tickets-inner">
                    <div class="ticket-details">
                        <div class="ticket-prop">
                            <div class="ticket-name">{{ items.product_name }}</div>
                            <div class="ticket-type">{{ items.variation_name }}</div>
                        </div>
                    </div>
                    <DeleteButton />
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import image from "../../../../img/Hallenbad.jpg";
import DeleteButton from "./DeleteButton";
import cartHelper from "../helpers/cartHelper";

export default {
    props: {
        items: Object,
    },
    components: {DeleteButton},
    data() {
        return {
            image: image,
        };
    },
};
</script>

But I am getting errors. vue.esm.js:628 [Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'id')" and TypeError: Cannot read properties of undefined (reading 'id'). And if I delete ':key="items.product.id"' from parent component this time I am getting a warning but items cannot be displayed again. [Vue warn]: Invalid prop: type check failed for prop "items". Expected Object, got String with value "00e84ffb-1fbf-00bf-d3cc-adbcc795e060" and [Vue warn]: Invalid prop: type check failed for prop "items". Expected Object, got String with value "carts"

But the thing is if I try to display the items in the parent component, it works without warning & erros. So why do you think it is happening? Thanks for the helps.

Mario Klisanic · Accepted Answer · 2021-11-15 08:13:26Z

The problem here is that items are an array of objects, as can be seen from the console.log(), but you treat it as an object in your code. You can change that by either passing a certain object to the child component like this:

        <div v-for="items in cart" :key="items.product.id">
            <div class="col-lg-8 col-md-12 col-sm-12 col-xs-12">
                <div class="title">WARENKORB</div>
                <SoldTickets :items = "items[0]"/>  --> only pass first object
            </div>
        </div>

Or you change your child component to accept arrays and then loop through the array in the template like this:

<template>
    <div id="sold-tickets">
        <div class="card">
            <div class="sold-tickets-actions">
                <div class="sold-tickets-inner">
                    <img class="sold-tickets-image" :src="image" alt="Sold Ticket"/>
                </div>
            </div>
            <div v-for="item in items" :key="item.product.id" class="sold-tickets-actions properties">
                <div class="sold-tickets-inner">
                    <div class="ticket-details">
                        <div class="ticket-prop">
                            <div class="ticket-name">{{ item.product_name }}</div>
                            <div class="ticket-type">{{ item.variation_name }}</div>
                        </div>
                    </div>
                    <DeleteButton />
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import image from "../../../../img/Hallenbad.jpg";
import DeleteButton from "./DeleteButton";
import cartHelper from "../helpers/cartHelper";

export default {
    props: {
        items: Array,
    },
    components: {DeleteButton},
    data() {
        return {
            image: image,
        };
    },
};
</script>

tony19 · Accepted Answer · 2022-07-16 02:41:34Z

The problem is that you are looping through the object cart which has many keys, and some of their values are strings (eg: "00e84ffb-1fbf-00bf-d3cc-adbcc795e060"), at the same time your child component expects to receive an object. That's why it's spitting out the errors. You can read more about List Rendering with an Object here.

My suggestion:

If you need cart.attributes.items in your child component, then just send it, change your computed property cart to an array:

computed: {
    cart() {
        return this.$store.state.cart.attributes?.items || [];
    }
}

in the template, passing item array into the child component, the variable item should be in singular form, you can name whatever you want, but for the sake of clarity, please use singular form:

<div v-for="item in cart" :key="item.id">
        <div class="col-lg-8 col-md-12 col-sm-12 col-xs-12">
            <div class="title">WARENKORB</div>
            <SoldTickets :item = "item"/>
        </div>
    </div>

don't forget to change your props declaration:

props: {
    items: Array,
}

Collectives™ on Stack Overflow

Sending object as a props in Vue.js and getting TypeError and Warning

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related