Javascript Vue 2.0:将异步数据传递给子组件
我有一个父Vue组件,它通过一个道具将数据传递给它的子组件,但是数据是异步可用的,因此我的子组件使用未定义的值进行初始化 在数据可用之前,如何防止初始化? 家长:Javascript Vue 2.0:将异步数据传递给子组件,javascript,asynchronous,vue.js,vuejs2,Javascript,Asynchronous,Vue.js,Vuejs2,我有一个父Vue组件,它通过一个道具将数据传递给它的子组件,但是数据是异步可用的,因此我的子组件使用未定义的值进行初始化 在数据可用之前,如何防止初始化? 家长: var employees = new Vue({ el: '#employees', data: { ... }, methods: { fetch: function(model, args=null) { let url = "/" + model + ".json"
var employees = new Vue({
el: '#employees',
data: { ... },
methods: {
fetch: function(model, args=null) {
let url = "/" + model + ".json"
console.log(url);
$.ajax({
url: url,
success: ((res) => {
console.log(res)
this[model] = res;
this.isLoading = false;
error: (() => {
this.isLoading = false;
}),
complete: (() => {
// $('.loading').hide();
this.isLoading = false;
})
})
},
mounted: function() {
this.fetch(...)
this.fetch(...)
this.fetch('appointments')
}
})
我的提取方法被多次调用。您可以在父模板中使用
v-if
:
<template v-if="everthingIsReady">
<child-item :data="data"></child-item>
</template>
只有当一切就绪
设置为真
并且您可以在所有呼叫完成后将其设置为正确,才能创建子项。使用
在下面的代码中,我修改了fetch
方法以从ajax调用返回承诺。然后,我们可以在一个数组中收集这些承诺,并将它们传递给Promise.all
,并在所有ajax调用完成后执行一些操作。在这种情况下,设置isLoading
属性,以便可以在子组件上使用v-if
var employees = new Vue({
el: '#employees',
data: { isLoading: true },
methods: {
fetch(model, args=null) {
let url = "/" + model + ".json"
const success = res => this[model] = res
const error = err => console.log(err)
return $.ajax({url, success, error})
}
},
mounted(){
let promises = []
promises.push(this.fetch('stuff'))
promises.push(this.fetch('otherstuff'))
promises.push(this.fetch('appointments'))
Promise.all(promises)
.then(() => this.isLoading = false)
.catch(err => console.log(err))
}
})
我的问题是我多次调用
fetch()
,所以它会在第一次迭代时更新所有内容
。简单高效,我喜欢它。。。谢谢,太棒了!非常感谢。