Exploring the realms of Vue and Laravel, I find myself in new territory. As the parent element, I fetch items from the database successfully. Now, the task at hand is to pass this data to the child component.
<template>
<div class="todoListContainer">
<div class="heading">
<h2 id="title">Todo List</h2>
<AddItemForm></AddItemForm>
</div>
<ListView
v-bind:items="items"/>
</div>
</template>
<script>
import AddItemForm from "./AddItemForm.vue"
import ListView from "./ListView.vue"
export default {
components: {
AddItemForm,
ListView
},
mounted() {
this.getList()
console.log(this)
},
data() {
return {
items: [], // All items stored in an array and then bound to the ListView Component
}
},
methods: {
getList: function () {
axios.get('api/items')
.then(response => {
this.items = response.data
console.log( this.items )
})
console.log( this.items )
}
}
}
</script>
In my Child components, when attempting to log the props, they mysteriously return undefined. Here's a snippet of the ListView child component:
<template>
<div>
<div
v-for="{item, index} in items" :key="index">
<ListItem
v-bind:item="item" class="item"/>
</div>
</div>
</template>
<script>
import ListItem from './ListItem.vue'
export default {
// Props not working as expected
// Looping through items on line 4 and binding them to the ListItem component
props: [ 'items' ],
components: {
ListItem
},
created() {
console.log( this.items )
}
}
</script>
I've followed the guidelines meticulously, crafting a method to gather all data and relay it to the child component. Yet, something seems amiss. Can anyone shed some light on this issue?