小编New*_*mer的帖子

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

我正在尝试实现在子组件(模态组件)中显示每个项目收据数组的项目列表,但一直无法这样做。方法display_receipts()是将receives_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>
Run Code Online (Sandbox Code Playgroud)

孩子:

<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>
Run Code Online (Sandbox Code Playgroud)

vue.js

5
推荐指数
1
解决办法
1970
查看次数

标签 统计

vue.js ×1