Question

我的Vue应用程序中有一个功能，需要一些时间（约2-3秒）才能完成。它是不 AJAX调用。

我希望在执行此代码时包含加载指示器，但我无法完成它。我以为我可以做以下事情......

<div v-on:click="doLoading(); doThings();">{{stuff}}</div>

......但这不起作用。在longFunction（）完成之前，doThings（）似乎没有执行任何操作。我甚至尝试制作一个单独的功能并更改我的按钮以执行这样的两个功能......

{{1}}

......但这也不起作用。我试图做的是什么？

Answer 1

在解决Promise后，使用longFunction（）的异步代码并将this.loading设置为false。

<div v-on:click="doThings()">{{stuff}}</div>

methods: {
    doThings: function () {
        this.loading = true
        longFunction().then(() => {
            this.loading = false
        })
    }
}

var longFunction = function() {
  return new Promise((resolve, reject) => {
     window.setTimeout(()=>{ //  force a new (pseudo)thread
         // do stuff, then
         resolve()
     },100); // ...some reasonably short interval. One millisecond is working for me when testing locally,  but it might be better to include some extra buffer, to ensure Vue is in its next tick
  });
}

或者，您可以将对象引用传递给您的Vue组件可以watch进行更改的longFunction，并将其用作返回组件的信号，它可以将loading设置为false。 / p>

加载长（非AJAX）功能指示器？

1 个答案: