javascript Vuejs 加载数据后才挂载子组件

Vuejs mount the child components only after data has been loaded

提问by Geoff

What am trying to achieve is to pass data as props in my children components but this data is loaded from the server so it takes a while to load.

我试图实现的是在我的子组件中将数据作为道具传递，但这些数据是从服务器加载的，因此加载需要一段时间。

I would now like to only mount the children components when the data is fully loaded

我现在只想在数据完全加载时安装子组件

SO currently am doing this

所以目前正在这样做

IN the parent component

在父组件中

<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>

NOw in my child component

现在在我的子组件中

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

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

     }

</script>

As from the above example the data passed as props is always empty on the children component. How do i only mount the child component after data has been received or how do i ensure that the childs component get the latest data changed.

从上面的例子来看，作为 props 传递的数据在子组件上总是空的。我如何只在收到数据后才挂载子组件，或者如何确保子组件获得最新的数据更改。

回答by Niklesh Raut

Use <template v-if="childDataLoaded">,And load your child component after getting data like this

使用<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>

Here is the Nice and cleaner way to update child component.

这是更新子组件的好方法。

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() {
      var vm =  this;
      setTimeout(function() {
         vm.name = "Raut";
          vm.loading = false;
    }, 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>

回答by Rahul Hirve

Just Bind keyto child-cmpyou get reactive output. this is simplest method of reactivity in Vue js.

只需绑定key到child-cmp您即可获得无功输出。这是 中最简单的反应方法Vue js。

<template>
  <child-cmp :key="childdata" :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>