Vue + axios 在值更改時不更新 DOM

Question

我有上傳文件的循環

      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 上的百分比不上傳，但在控制台中它記錄寫入文件的百分比。

在此處輸入圖像描述

Answer 1

您應該按照鏈接中的說明使用Vue.set

由於 JavaScript 的限制，Vue 無法檢測到某些類型的更改。 但是，有一些方法可以繞過它們以保持反應性。

Vue.set(file, 'status', 'uploading');
Vue.set(file, 'uploadPercentage', Math.round((event.loaded * 100) / event.total) * 0.9);

Answer 2

您可以使用 $forceUpdate() 手動更新虛擬 dom

 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);
            this.$forceUpdate()
          }
        )
        
     

Answer 3

我將 $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 }
            )