Vue parent component props are not passing to child component

user_11714201 0
Viewed 1720

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
axios vue-component vue.js frontend javascript
2 Answers

use a computed instead

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

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

You can see that there are some problems - but they are only syntactical. Try with different casing (and wait for the text to change - 3s):

Vue.component('my-component', {
  props: ['propsData'],
  template: '<p>{{ propsData.title }}</p>'
})

new Vue({
  el: "#app",
  data: {
    itemData: {
      title: 'OLD TITLE'
    }
  },
  mounted() {
    const self = this
    // simulating an async call:
    setTimeout(function() {
      self.itemData.title = 'NEW TITLE'
    }, 3000)
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <my-component v-bind:props-data="itemData" />
</div>

user_23165400
Related