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组件中，不应在data对象内部声明道具

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

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

1 个答案: