vue js 如何使用方法将数据从父组件、v-for 循环列表传递到子组件 [英] vue js how to pass data from parent, v-for loop list to child component with method
问题描述
我试图在子组件(modal-component)中实现显示每个项目收据数组的项目列表，但一直无法这样做.方法display_receipts()是将receives_modal的数据值改为true.我可以在哪里放置 v-bind 以传递数组?非常感谢任何帮助.
家长:
孩子:
<div class="modal"><ul><li v-for="receipt in收据">{{receipt.date }} {{receipt.email }} {{receipt.item }}</li></模板><脚本>导出默认{道具:[收据]，数据() {返回 {收据:[]，收据: {ID: ''，日期: ''，电子邮件: ''，物品: ''}}}}
父组件:我在 data() 中添加了一个 receipts: {} 键.和方法 display_receipts(item.receipts) 添加了从循环到 receipts{} 的数据传递:
display_receipts(receipts) {this.receipts = 收据；this.receipts_modal = true;}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>
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;
}
这篇关于vue js 如何使用方法将数据从父组件、v-for 循环列表传递到子组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
