How to pass values to child Component vue and loop?

Question

I am using axios call to get values from API. I want to se Home and ListItem components. I want to

<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>

How to pass my IdeaList values to my ListItem component? And display them though loop. Where I am missing anything? I tried to insert propslike this:

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

and display value:

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

Where to look for how to make this work?

Answer 1

I'm not sure whether you want to pass complete ideaList or just iterated object to ListItem, but here are two obvious mistakes.

You've forgot to declare prop you want to pass to the ListItem

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

In ListItem component, props shouldn't be declared inside data object

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