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>

Moumen Soliman · Accepted Answer · 2018-12-28 10:31:00Z

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, 2018 at 10:31

Moumen Soliman

1,6941 gold badge17 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

NewProgrammer Over a year ago

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<modal-component>

NewProgrammer Over a year ago

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.

Moumen Soliman Over a year ago

can you update parent component with the full code, please?

NewProgrammer Over a year ago

thanks Moumen, i managed to solve it by passing array from loop into a new data key. Previously i did not have this.

Moumen Soliman · Accepted Answer · 2018-12-28 13:35:31Z

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, 2018 at 13:35

Moumen Soliman

1,6941 gold badge17 silver badges21 bronze badges

answered Dec 28, 2018 at 11:08

NewProgrammer

2951 gold badge6 silver badges24 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related