如何在方法运行时更新 DOM?

Question

我正在编写一个简单的工具，可以在客户端工作。基本上，用户引入一个文件，按下一个按钮启动它，它用它做一些事情(大约需要 10-15 秒(，然后它返回修改后的文件。

不幸的是，一旦他们按下按钮启动方法，DOM 在方法完成之前不会更新，因此在全部完成之前没有反馈，这非常令人沮丧。

在模板部分，我有：

<p v-if="processingStatus==1">Processing data...</p>

默认情况下，"processingStatus"变量设置为 0。

在该方法中，它是"processData"，在按下按钮时调用，它以

this.processingStatus = 1

然后继续处理数据。

不幸的是，"处理数据..."标记在方法完成之前不会显示。如何强制 VueJS 在方法运行时渲染 DOM？

Answer 1

根据你所说的processData正在做的事情(遍历数组中的一堆数据(，我的猜测是它没有异步运行，而是锁定 javascript 线程，直到它完成。

你需要做的是在里面processData像你一样设置了 is 处理变量，然后在 promise 或其他机制中执行所有实际工作来释放控制和更新 UI。

可能你也可以打电话

vm.$forceUpdate();

在开始所有阵列工作之前。