How to send & receive object as a props in Vue.js

I have a Product object and I am taking it from API call. So in parent component I want to send this object into the child object which is SoldTickets component.

So here is my parent component:

<template>
    <section id="cart-page" class="row">
        <div v-for="item in cart.attributes.items" :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>
    </section>
</template>

And my child:

<template>
    <div id="sold-tickets">
        <div class="card">
            <div 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 @click.prevent="removeProductFromCart(item.id)" />
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        data: {
            item: Object,
        }
    },
}
</script>

So I am quite new in Vue so I am not really confident with props. COuld you please help me with this.

>Solution :

You mostly have it right, but there are a couple of errors:

Your props aren’t declared correctly in the child component, you shouldn’t have the "data" in there. All props you want to declare go directly under the "props" key of the component declaration:

export default {
    props: {
        item: Object,
    },
}

You’re also missing quotes around the attribute value in the parent component, so that’s invalid HTML:

<SoldTickets :item = item />

should be

<SoldTickets :item = "item" />