Working with the axios call to fetch data from an API has been my current challenge. I am aiming to integrate the Home and ListItem components seamlessly.
<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>My main concern lies in passing the IdeaList values to the ListItem component and rendering them using a loop. Despite my efforts to insert props as follows:
<script>
export default {
name: "ListItem",
data() {
return {
props: ['idea']
}
}
}
and displaying the value:
<template>
<span class="column is-8">
{{idea.title}}
</span></template>
Where should I seek guidance on getting this feature to function correctly?