javascript - 如何在方法运行时更新 DOM？

Question

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

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

在模板部分，我有:

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

“processingStatus”变量默认设置为 0。

在按下按钮时调用的“processData”方法中，它以

开头

this.processingStatus = 1

然后继续处理数据。

不幸的是，“Processing data...”标签在方法完成之前不会出现。如何在方法运行时强制 VueJS 渲染 DOM？

Answer 1

根据你所说的 processData 正在做的事情(通过数组中的一堆数据)，我的猜测是它没有运行异步并且正在锁定 javascript 线程直到它完成.

您需要做的是在 processData 内部像您一样设置正在处理的变量，然后在 promise 或其他一些机制内完成所有实际工作以释放控制权并更新 UI。

可能你也可以打电话

vm.$forceUpdate();

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