时间戳

首页 > 解决方案 > Vue + axios 在值更改时不更新 DOM

javascript - Vue + axios 在值更改时不更新 DOM

问题描述

我有上传文件的循环

      this.fileUpload.filter((file) => !file.error)
        .map((file, index_file) => {
          var formData = new FormData();
          formData.append("folderID", id);
          formData.append("folderName", name);
          formData.append("type", type);
          formData.append(`content`, file);

          fileService
            .uploadfiles(
              formData,
              (event) => {
                file.status = "uploading";
                file.uploadPercentage =
                  Math.round((event.loaded * 100) / event.total) * 0.9;
                if (file.uploadPercentage == 90) {
                  file.status = "uploaded";
                }
                console.log(  file.uploadPercentage);
              }
            )
            .then((result) => {
              file.uploadPercentage = 100;
              file.status = "done";
            })
            .catch(() => {
              file.status = "uploaded";
            });
        });

ps fileService.uploadfiles 文件用于创建函数调用 axios.post

和 div 用于显示上传

   <div v-for="(file, file_index) in fileUpload" :key="`file_preview_${file_index}_${file.name}_${file.status}`">

{{ file.uploadPercentage }}
</div>

我不明白为什么 div 上的百分比不上传，但在控制台中它记录写入文件的百分比。

在此处输入图像描述

标签： javascriptvue.jsvuejs2

解决方案

我将 $nextTick 添加到箭头函数中以重新渲染并将 v-if rerenderProgress 添加到模板。

uploadfiles(
              formData,
              (event) => {
                file.status = "uploading";
                file.uploadPercentage = Math.round((event.loaded * 100) / event.total) * 0.9;
                this.rerenderProgress = false;
                this.$nextTick(function () {
                  this.rerenderProgress = true;
                });
                // this.$forceUpdate();
                if (file.uploadPercentage == 90) {
                  file.status = "uploaded";
                }
              },
              { cancelToken }
            )

推荐阅读