vue 不加载数据到子组件

Question

我很难理解vue的方法。在我的放置请求中，用户可以编辑、删除图像。在父组件中，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
    })
}

正常的异性恋亲子情况。这里在child-component下

<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' 应该通过 computed.But 自动删除服务器数据，但事实并非如此。谁能帮忙？

Answer 1

存在竞争条件。

在数据可用之前不呈现 child； serverMap 需要为 null 而不是空 object 以便与填充的 object:

区分开来

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

或者在 child 中延迟数据访问直到它可用，而不是在 created 中立即执行此操作：

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

vue 不加载数据到子组件

vue not loading data into child component

image

vue.js

vue-props