Vue 3 Props is not working on child components after binding it correctly. It returns undefined in c-CodePudding

I am new to Vue and Laravel. This is my parent element, I am getting items from the database which is working fine. Then bind it to the child component.

<template>
  <div >
    <div >
      <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: [], // Stored all the items in an array and i binded it on 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 I try to console log the props it returns undefined. Below is my ListView child component.

<template>
  <div>
    <div 
    v-for="{item, index} in items" :key="index">
      <ListItem 
      v-bind:item="item" />
    </div>
  </div>
</template>

<script>
  import ListItem from './ListItem.vue'
export default {
  // Props not working
  // On line 4 i looped through the items and then bind it to ListItem component
  props: [ 'items' ],
  components: {
    ListItem
  },
  created() {
    console.log( this.items )
  }

}
</script>

I have done everything by the book. Creating a method for collecting all the data and bind it to the child component.

Can someone help me on this?

CodePudding user response：

the child component is created before the api call is received, so not yet there in the created hook. Quick fix would be to add v-if so that the child component is rendered after items are ready:

   <ListView v-if="items.length > 0" v-bind:items="items"/>