我有一个vue.js应用程序，其中有几个子组件，如下所示：
<main-app>
<child-component></child-component>
<child-component></child-component>
<child-component></child-component>
...
</main>
加载页面后，我可以使用ready钩子来知道组件已完成加载。现在，这些组件使用ajax数据填充，并且可以通过单击按钮进行手动更新。我可以使用broadcast和dispatch方法从每个子组件中获取数据。但是我想在用户单击按钮时向用户显示一个预加载器，并在所有ajax请求完成时将其隐藏。为此，我需要知道所有子组件都已完成加载。最近4-5个小时我不能做。Google和SO并没有太大帮助。
我也尝试过使用jQuery，ajaxStop但似乎不适用于vue-resource。谁能帮帮我吗？
我需要做一次类似的事情，最终要做的事情（除了在完成vue渲染后使用v-cloak来显示应用程序）还跟踪每个需求变量是否data已经有数据（只有），然后才“显示”应用程序（为此，我使用了一个内部标志来控制是显示应用程序还是显示加载消息）。
与此类似（使用underscore.js）：
var app = new Vue({
el: 'body',
data: {
data1: [],
data2: [],
data3: []
},
ready: function() {
this.showApp();
// Data 1
$.getJSON('/path-to/data1', function(data) {
app.$set('data1', data);
app.showApp();
});
// Data 2
$.getJSON('/path-to/data2', function(data) {
app.$set('data2', data);
app.showApp();
});
// Data 3
$.getJSON('/path-to/data3', function(data) {
app.$set('data3', data);
app.showApp();
});
},
methods: {
showApp: function() {
// Check if all data was loaded
var requiredData = _.every(['data1', 'data2', 'data3'], function(el) {
return _.size(this[el]) > 0;
}, this);
// If it was, enable the app
if (requiredData) {
$(this.$els.loading).hide();
$(this.$els.app).fadeIn();
}
}
}
});
由于使用的是组件，因此必须使用事件showApp在主应用程序上触发该方法。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句