javascript - 在 vue js 函数期间显示加载动画

Question

在 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');
    }

加载器从不显示。如果我注释掉隐藏命令，加载程序会在警报后显示。让我觉得幕后正在进行某种异步操作，但我没有做异步操作。

Answer 1

您不需要使用 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)
       }

   }
}