一个在加载元素上简单的显示和隐藏在Vue js函数执行期间失败了。
我有一个Vue js函数,它将在完成后执行某些事情并更新数据。我试图在此过程中显示加载动画。出于讨论目的,我已经将此过程简化为一个简单的循环,以消除所有其他问题(例如ajax、async等)。
我的按钮HTML如下所示:
<button type="button" v-on:click="DoStuff()">Do Stuff</button>
我的Vue.js代码如下所示:
var client = new Vue({
el: '#client',
data: {
someData: []
},
methods: {
DoStuff: function() {
//Show Loader
$(".loader").show();
//Waste 5 seconds
for (var i = 0; i < 100000000; i++) {
var x = i;
}
//Hide loader
$(".loader").hide();
// let me know it's done.
alert('cool');
}
加载器从未出现。如果我注释掉hide命令,加载器会在警报后显示。这让我想到某种异步操作正在进行,但我没有执行异步操作。