javascript - 如何将值传递给子组件 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 组件？并通过循环显示它们。我在哪里遗漏了什么？我试着像这样插入 Prop :

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

和显示值:

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

在哪里可以找到如何进行这项工作？

Answer 1

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

您忘记声明要传递给 ListItem

的 Prop

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

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

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