在 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>

最后我说我也认为你的 sn-p 有点搞砸了。 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)
       }

   }
}

Answer 2

不要使用 jquery。你可以用 vuejs 做到这一点。

var client = new Vue({
    el: '#client',
    data: {
        someData: [],
        loading: false,
},
methods: {
    DoStuff() {

        //Show Loader
        this.loading = true;

        //Waste 5 seconds

        //Hide loader
        this.loading = true;

        // let me know it's done.
        alert('cool');
    }

还有你的 HTML。

<div class="loading" v-if="loading">
    Loading....
</div>
<div v-else>
The rest of your website 
</div>

Answer 3

最好不要和JQuery混用，改用Vue条件显示（v-show）。

在你的加载器中：

<div class="loader" v-show="loading"></div>

在你的 Vue 代码中：

var client = new Vue({
    el: '#client',
    data: {
        someData: [],
        loading: false
},
methods: {
    DoStuff: function() {

        this.loading = true;

        //Waste 5 seconds
        for (var i = 0; i < 100000000; i++) {
            var x = i;
        }

        this.loading = false;

        // let me know it's done.
        alert('cool');
    }

Answer 4

谢谢大家。我必须专注于出现的一个更重要的功能。但我只是想分享我所看到的。这不是（或）最终答案，但它解释了问题和正确的方法。

Andrew Lohr 正确识别了该问题，如下所述： jQuery hide() and show() not immediately run when reversed later in the function

最好的（但不是唯一的）解决方案是使用 perellorodrigo 在此处提到的事件总线：https://flaviocopes.com/vue-components-communication/

当我有时间时，我会发布我的最终解决方案。