Реквизиты родительского компонента Vue не передаются дочернему компоненту - PullRequest
Новая
       31

Реквизиты родительского компонента Vue не передаются дочернему компоненту

0 голосов
/ 01 июля 2019

Я хочу получить новые данные из БД с axios в родительском компоненте и передать эти данные дочернему компоненту.Но родительский компонент передает старые данные (которые еще не обновлены с помощью axios.)

Я думаю, что это не проблема с axios.Потому что я вижу, как новые данные обновляются с помощью аксиом, представленных в родительском компоненте.Но родительский компонент не передает его дочернему компоненту.

родительский компонент 

<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>

дочерний компонент 

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

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

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

Фактические результаты 

{"title" : "NEW TITLE"}

OLD TITLE

Ожидаемые результаты 

{"title" : "NEW TITLE"}

NEW TITLE

Ответы [ 2 ]

0 голосов
/ 01 июля 2019

Вы можете видеть, что есть некоторые проблемы - но они только синтаксические.Попробуйте использовать другой регистр (и подождите, пока текст не изменится - 3 с): 

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>
0 голосов
/ 01 июля 2019

используйте вместо вычисленного 

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

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