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>

score 3 · Answer 1 · answered Dec 28 '18 at 10:31

3

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

answered Dec 28 '18 at 10:31

Moumen Soliman

1,664
1
14
19

Thank you for helping me out. The child component data receipts is empty when the span was clicked, modal was displayed. The array from parent is not passing to child. i am trying to get item.receipts to pass to the child component – NewProgrammer Dec 28 '18 at 10:41
i have tried to put a data key outside of items, it is being passed to the child component successfully. However i am unable to pass the receipts array data from item of items array to the child component. – NewProgrammer Dec 28 '18 at 10:54
can you update parent component with the full code, please? – Moumen Soliman Dec 28 '18 at 11:01
1

thanks Moumen, i managed to solve it by passing array from loop into a new data key. Previously i did not have this. – NewProgrammer Dec 28 '18 at 11:09

score 1 · Accepted Answer · edited Dec 28 '18 at 13:35

1

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;
}

edited Dec 28 '18 at 13:35

Moumen Soliman

1,664
1
14
19

answered Dec 28 '18 at 11:08

NewProgrammer

295
1
4
21

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

2 Answers2

Linked