vue没有将数据加载到子组件中

Question

我很难理解 vue 的方法。在我的 put-request 中，用户可以编辑、删除图像。在父组件中，get-request 加载图像并通过属性推送到图像库（子组件）。在我的设置中，console.log 始终为空。

//PARENT COMPONENT
<template>
   <div class="form-group">
   <image-gallery :serverData="serverMap"/>
</div>    
</template>
<script>
   import ImageGallery from './ImageGallery.vue';

   export default {
   components:{ImageGallery},

data: () => ({
    serverMap: {
        title: '',
        file: ''
    } 

}),
mounted () {
    //AJAX ETC get servermap

    .then((response) => {
        this.serverMap = response.data
    })
}    

只是一个正常的异性恋亲子情况。这里在子组件下

<template>

</template>
<script>
export default {
name: 'ImageGallery',

//incoming data
props: {
    serverData: {
        type: Object,
        default () {
            return {
                hasLabels: true,
                isHorizontal: false
            }
        }
    }
},



created: function () {
    this.loadImages()
},
methods: {
    loadImages () {
        console.log(this.serverData.file)
        //do something with the serverData

        //prepare for fileReader function
        //together with new image validation
    }
}

方法'loadImages'应该通过计算自动解除serverData。但不是。谁能帮忙？

Answer 1

存在竞争条件。

在数据可用之前不渲染孩子； serverMap 需要为 null 而不是空对象，以便与填充对象区分开来：

<image-gallery v-if="serverMap" :serverData="serverMap"/>

或者延迟孩子的数据访问直到它可用，而不是立即在created中这样做：

watch: {
  serverData(data) {
    if (data)
      this.loadImages()
  }
}