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

Posted 2023-02-23

【中文标题】vue没有将数据加载到子组件中

【英文标题】：vue not loading data into child component

【发布时间】：2021-11-02 19:54:17

【问题描述】：

我很难理解 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。但不是。谁能帮忙？

【参考方案1】：

存在竞争条件。

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

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

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

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

【讨论】：

底层解决方案对我有用。我必须提高我在计算、安装等方面的理解！