Vue.js 在vue计算时更改css

在用户点击一些可能很繁重的计算（下面的“设置选择”）后，我想向用户显示应用程序正在忙，而它正在计算。我尝试了以下方法：

data() {
    return {
      isWaiting: false,
    };
},

methods: {
handleClick(node) {
  this.cursorWait();
  this.$nextTick()
      .then(this.$emit("set-selectie", node))
      .then(this.cursorClear);
},
cursorWait() {
  this.isWaiting = true;
},
cursorClear() {
  this.isWaiting = false;
}

$emit

需要一些时间，因此我希望vue根据

this.isWaiting

数据显示一个简单的css更改（光标）。但是，看起来vue实际执行的操作并没有对

中的更改做出响应。它正在等待
直到计算完成

正如您所看到的，我尝试了
$nextTick
，但我也尝试了生命周期方法和
这个。$forceUpdate（）
。它们也不起作用

我怎样才能让它工作
 假设这是一个问题，“在用户单击时，可能会进行一些繁重的计算，因此我想向用户显示，应用程序正在忙，而它正在计算。”

我想用我的努力来解决这种情况：

让计算是
异步的
，您永远不知道它何时完成，也不知道执行
函数需要一些时间


newvue({
el:“应用程序”，
数据：{
正文：“，
进程：错误
},
方法：{
计算：函数（）{
this.inProgress=true；
新承诺（（解决、拒绝）=>{
setTimeout（函数（）{
决心（‘我完成了’）
},3000)
}).然后（e=>{
this.text=e；
this.inProgress=false；
})
}
}
})

点击我
{{text}}

加载。。。
看起来浏览器通过CSS处理光标变化的方式非常不一致

我们确实获得了以下工作（在上面的handleClick方法中）：

所以我们基本上是在Vue之外用基本javascript解决这个问题
 vue中的beforeUpdate生命周期方法可能会有所帮助！您必须记住JavaScript是单线程的，并且还包括UI。（不包括webworkers，但他们无论如何都不能触摸UI。）因此，当其他事情发生时，不会发生任何事情。您假设
$emit
将返回承诺，但它不会！我觉得我需要更多的代码来说明一些有用的东西。计算方法在何处触发？
。然后（这个。$emit（“设置选择”，节点））
这个应该是
。然后（（）=>这个。$emit（“设置选择”，节点））
谢谢。这是我曾经想到但还没有尝试过的一件事，但它也不起作用。Vue仅在计算完成后，而不是之前，继续重新绘制dom。
    let _this = this;
    window.requestAnimationFrame(function() {
      document.getElementById("treemain").style.background = "#ccc";
      document.getElementById("treemain").style.color = "#666";
      window.requestAnimationFrame(function() {
        _this.$emit("set-selectie", node);
        document.getElementById("treemain").style.background = "#fff";
        document.getElementById("treemain").style.color = "#011d47;";
      });
    });