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"]
}