Vuejs只有在加载数据后才加载子组件
问题描述:
试图实现的是将数据作为子组件中的道具传递,但是这些数据是从服务器加载的,因此加载需要一段时间。Vuejs只有在加载数据后才加载子组件
我现在想只安装儿童组件时,数据被完全加载
所以目前正在做这
父组件
<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总是空的。如何在收到数据后才安装子组件,或者如何确保子组件获取更改的最新数据。
答
使用<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>
+0
感谢这项工作 –
+0
工作,但可能不是最好的方法去取决于你如何使用传递到子组件 –
你如何使用的子组件的数据? 'mounted()'仅在组件初始加载时调用。您是否需要加载数据,或者可以在服务器调用完成后稍后进行更新。 –
@TimHutchison只是指定它来形成输入,它的选择下拉 –
您可以将空列表绑定到右下方的蝙蝠,然后当列表更新下拉列表将自动更新。我会稍后尝试添加示例。 –