Vuejs只有在加載數據後才加載子組件

Question

試圖實現的是將數據作爲子組件中的道具傳遞，但是這些數據是從服務器加載的，因此加載需要一段時間。

我現在想只安裝兒童組件時，數據被完全加載

所以目前正在做這

父組件

<template> 
    <child-cmp :value="childdata"></child-cmp> 
</template> 

<script> 
    export default{ 
    data(){ 
     childdata : []; 
    }, 

    methods:{ 
     fetchINitData(){ 
     //fetch from server then 
     this.childdata = res.data.items; 
     console.log(res.data.items) //has some values 

     } 

    } 


    components:{ 
    childcmp 
    }, 

    mounted(){ 
    this.fetchINitData(); 


    } 
    } 
</script> 

現在在我的子組件

<script> 
export default{ 
    props:["value]; 

    mounted(){ 
     console.log(this.value) //this is always empty 
    } 

    } 

</script> 

從上面的例子中，數據傳遞爲p在子組件上，rops總是空的。如何在收到數據後才安裝子組件，或者如何確保子組件獲取更改的最新數據。

Answer 1

使用<template v-if="childDataLoaded">，並獲得數據這樣

<template> 
    <template v-if="childDataLoaded"> 
    <child-cmp :value="childdata"></child-cmp> 
    </template> 
</template> 

<script> 
    export default{ 
    data(){ 
     childDataLoaded: false, 
     childdata : []; 
    }, 
    methods:{ 
     fetchINitData(){ 
     //fetch from server then 
     this.childdata = res.data.items; 
     this.childDataLoaded = true; 
     console.log(res.data.items) //has some values 
     } 
    } 
    components:{ 
    childcmp 
    }, 
    mounted(){ 
    this.fetchINitData(); 
    } 
    } 
</script> 

後裝入您的子組件以下是更新子組件尼斯和清潔的方式。

var child = Vue.extend({ 
 
    template: "<div>Child Component : {{name}} <div v-if='loading'>Loading...</div></div>", 
 
    props: ['name','loading'] 
 
}); 
 
var app = new Vue({ 
 
    el: "#vue-instance", 
 
    data: { 
 
     name: "Niklesh", 
 
     loading: true 
 
    }, 
 
    mounted() { 
 
    \t \t var vm = this; 
 
    \t \t setTimeout(function() { 
 
     \t vm.name = "Raut"; 
 
      vm.loading = false; 
 
\t \t \t \t }, 1000); 
 
    }, 
 
    components: { 
 
     child 
 
    }, 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.1/vue.js"></script> 
 
<div id="vue-instance"> 
 
    <child :name="name" :loading="loading"></child> 
 
</div>