在 Vue js 函数执行期间,加载元素上的简单显示和隐藏失败。
我有一个 vue js 函数,它会做一些事情并在完成后更新数据。我试图在此过程中显示加载动画。为了本次讨论的目的,我将该过程简化为一个简单的循环,以消除所有其他问题(即 ajax、异步等)。
我的按钮 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');
}
加载器从不显示。如果我注释掉隐藏命令,加载程序会在警报后显示。让我觉得幕后正在进行某种异步操作,但我没有做异步操作。
最佳答案
您不需要使用 jQuery 来根据条件设置和隐藏页面上的元素,实际上这违背了 VueJS 和其他前端 javascript 框架的用途。
首先,您应该向 data
对象添加一个名为 loading 的属性
data: {
someData: [],
loading: false
}
然后,在您的 doStuff
函数中,删除 jquery 行并相应地设置加载属性
methods: {
doStuff: function() {
//Show Loader
this.loading = true;
//Waste 5 seconds
setTimeout(() => {
this.loading = false;
}, 5000)
}
}
最后,在你看来,添加这一行
<div v-if="loading">Loading some data</div>
最后我会说我也认为你的代码段有点困惑。 methods
属性应该在 Vue 实例定义中。
var client = new Vue({
el: '#client',
data: {
someData: [],
loading: false
},
methods: {
doStuff: function() {
//Show Loader
this.loading = true;
//Waste 5 seconds
setTimeout(() => {
this.loading = false;
}, 5000)
}
}
}
关于javascript - 在 vue js 函数期间显示加载动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54563379/