vue未将数据加载到子组件中

Question

我很难理解value的方法。在我的放置请求中，用户可以编辑、删除图像。在父组件中，get请求加载图像，并通过属性将图像推送到图片库(子组件)。在我的设置中，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()
}
}