如何将值传递给子组件vue并循环？

Question

我正在使用 axios 调用从 API 获取值。我想查看 Home 和 ListItem 组件。我想要

<template>
    <div>
            <list-item v-for="idea in ideaList" :key="idea.id"></list-item>
    </div>
</template>
<script>
    import ListItem from '../components/ListItem'
    let AddIdea = require('../components/AddIdea.vue');
    export default {
        name: "HomePage",
        components: {AddIdea, ListItem},
        data() {
            return {
                addActive: "",
                ideaList: {},
                errors: {},
            }
        },
        mounted() {
            axios.post('/getData')
                .then((response) => this.ideaList = response.data)
                .catch((error) => this.errors = error.response.data);
        },
    }
</script>

如何将 IdeaList 值传递给 ListItem 组件？并通过循环显示它们。我哪里遗漏了什么？我尝试插入这样的道具：

<script>
export default {
    name: "ListItem",
    data() {
        return {
            props: ['idea']
        }
    }
}

并显示值：

<template>
<span class="column is-8">
    {{idea.title}}
</span></template>

去哪里寻找如何使这项工作发挥作用？

Answer 1

我不确定您是否想要将完整的ideaList或只是迭代的对象传递给ListItem，但这里有两个明显的错误。

你忘记声明你想要传递给ListItem

<list-item v-for="idea in ideaList" :key="idea.id" :idea="idea"></list-item>

在ListItem组件中，props 不应该在data对象内部声明

export default {
    name: "ListItem",
    props: ["idea"]
}