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

加载程序从不显示。如果我注释了hide命令，则加载程序将在警报后显示。让我觉得某种异步操作正在幕后进行，但我没有做异步工作。

Answer 1

您不需要使用jQuery来根据条件设置和隐藏页面上的元素，实际上，这违背了VueJS和其他前端javascript框架的用途。

首先，您应该在data对象中添加一个名为loading的属性

data: {
   someData: [],
   loading: false
}

然后，在您的doStuff函数中，删除jquery行并相应地设置loading属性

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)
       }

   }
}

Answer 2

最好不要与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 3

不要使用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 4

谢谢大家。我必须关注出现的一个更重要的功能。但是我只是想分享我闪闪发光的东西。这不是（或最终）答案，但可以解释问题和正确的方法。

安德鲁·洛尔（Andrew Lohr）正确识别了该问题，下面对此进行了进一步说明： jQuery hide() and show() not immediately run when reversed later in the function

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

我将在解决它时发布最终解决方案。

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

4 个答案: