在方法运行时如何更新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();

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