vue js how to pass data from parent, v-for loop list to child component with method

Question

I am trying to achieve a list of items displaying each item receipts array in a child component(modal-component), but have been unable to do so. Method display_receipts() is to change the data value of receipts_modal to true. where can I place the v-bind to pass the array? Any help is much appreciated.

Parent:

<modal-component v-if="receipts_modal"></modal-component>
<ul>
    <li v-for="item in items">{{ item.name }} 
    <span @click="display_receipts(item.receipts)">receipts</span>
    </li>
</ul>

Child:

<template>
    <div class="modal">
        <ul>
            <li v-for="receipt in receipts">{{ receipt.date }} {{ receipt.email }} {{ receipt.item }}</li>
        </ul>
    </div>
</template>
<script>
export default {
    props: [receipts],
    data() {
        return {
            receipts: [],
            receipt: {
                id: '',
                date: '',
                email: '',
                item: ''
            }
        }
    }
}
</script>

Answer 1

You need to pass it as props,

<modal-component :receipts="receipts_modal" v-if="receipts_modal"></modal-component>

in child component you receive it, and this fine but you don't send it from the parent as props

Answer 2

Parent component: I added a key of receipts: {} in data(). And method display_receipts(item.receipts) added the passing of data from loop into receipts{}:

display_receipts(receipts) {
    this.receipts = receipts;
    this.receipts_modal = true;
}