vue js如何使用方法将数据从父组件，v-for循环列表传递到子组件答案

【问题标题】：vue js how to pass data from parent, v-for loop list to child component with methodvue js如何使用方法将数据从父组件，v-for循环列表传递到子组件
【发布时间】：2019-05-26 04:12:56
【问题描述】：

我正在尝试实现在子组件（模态组件）中显示每个项目收据数组的项目列表，但一直无法这样做。 display_receipts() 方法是将receipts_modal 的数据值改为true。我在哪里可以放置 v-bind 以传递数组？非常感谢任何帮助。

家长：

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

孩子：

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

【问题讨论】：

标签： vue.js

【解决方案1】：

你需要将它作为道具传递，

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

在子组件中你会收到它，这很好，但你不把它作为道具从父组件发送

【讨论】：

感谢您帮助我。单击span时子组件数据收据为空，显示模态。来自父母的数组没有传递给孩子。我正在尝试让 item.receipts 传递给子组件
我试图将数据键放在项目之外，它正在成功传递给子组件。但是我无法将收据数组数据从项数组项传递给子组件。
你能用完整的代码更新父组件吗？
感谢 Moumen，我设法通过将数组从循环传递到新的数据键来解决它。以前我没有这个。

【解决方案2】：

父组件：我在data() 中添加了receipts: {} 的键。和方法display_receipts(item.receipts) 将数据从循环传递到receipts{}：

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

【讨论】：