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

<template>
    <section id="cart-page" >
        <div v-for="items in cart" :key="items.product.id">
            <div >
                <div >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 >
            <div >
                <div >
                    <img  :src="image" alt="Sold Ticket"/>
                </div>
            </div>
            <div >
                <div >
                    <div >
                        <div >
                            <div >{{ items.product_name }}</div>
                            <div >{{ 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.

CodePudding user response：

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 >
                <div >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 >
            <div >
                <div >
                    <img  :src="image" alt="Sold Ticket"/>
                </div>
            </div>
            <div v-for="item in items" :key="item.product.id" >
                <div >
                    <div >
                        <div >
                            <div >{{ item.product_name }}</div>
                            <div >{{ 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>

CodePudding user response：

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 >
            <div >WARENKORB</div>
            <SoldTickets :item = "item"/>
        </div>
    </div>

don't forget to change your props declaration:

props: {
    items: Array,
}