Vue parent component props are not passing to child component

LLG Published at Dev

LLG

I want to get new data from DB with axios in parent component and pass that data to child component. But parent component pass the old data(which is not yet updated with axios.)

I think it is not the problem with axios. Because I can see the new data updated with axios presenting in parent component. But parent component doesn't pass it to child component.

parent component

<template>
<div>
    <p>{{itemData}}</p>
    <child v-bind:propsData="itemData"/>
</div>
</template>

<script>

import Child from './Child.vue'

export default {

  components: {
    Child,
  },

  data(){
    return {
      itemData: {
          title : 'OLD TITLE'
      }
    }
  },

  async created() {
    this.itemData = await this.$axios.get("/rest/getItem/");
    this.itemData = this.itemData.data;
  },

}
</script>

child component

<template>
    <div class="child">
        <li>{{title}}</li>
    </div>
</template>

<script>
export default {
    props: {
      propsData: {
        type: Object
      }
    },

    data(){
        return{
            title: this.propsData.title
        }
    }, 
}
</script>

Actual results

{"title" : "NEW TITLE"}

OLD TITLE

Expected results

{"title" : "NEW TITLE"}

NEW TITLE

men32z

use a computed instead

<script>
export default {
    props: {
      propsData: {
        type: Object
      }
    },

    computed(){
        title(){
          return this.$props.propsData.title
        }
    }, 
}
</script>

Collected from the Internet

Please contact [email protected] to delete if infringement.