Vue深拷貝object不改變值

Question

我有一個 vue 組件，其中包含一個名為 cachedAsset 的資產的深層副本。 它有一個名為 toDelete 的值來標記要軟刪除的文件。 我有以下代碼

markForDeletion(files) {
          const thisComponent = this;
          files.forEach((file) => {
              thisComponent.cachedAsset.files.find(f => file.id === f.id).toDelete = true;
          });
      }

這可以按預期工作，它將 the.toDelete 更改為 true，並且該文件在下一個過程中被過濾掉。

我遇到的問題是使用以下代碼將文件恢復到組件

restoreFilesFromDeletion(items) {
          items.forEach((item) => {
              this.cachedAsset.files.find(f => item.id === f.id).toDelete = false;
          });
      }

使用此代碼，它應該將 the.toDelete 設置回 false，但它沒有這樣做，我在控制台中沒有收到任何錯誤或任何內容。

誰能告訴我為什么執行時沒有將 the.toDelete 更新回 false。？

編輯 1

這就是我現在所擁有的

restoreFilesFromDeletion(items) {
          items.forEach((item) => {
              let files = this.cachedAsset.files.find(f => item.id === f.id)
              this.$set(files, 'toDelete', false)
          });
      }

它似乎正在設置它，但 true 仍然沒有變為 false ..

我還缺少什么嗎？ 可以提供任何進一步的建議...

Answer 1

當數據嵌套很深時，就會發生這種情況。 試試這個Vue.delete 。 並參見Reactivity in Depth 。

Answer 2

在用一些控制台測試重新分析結果后，我發現我的代碼中的其他地方有錯誤，一旦我修復了刪除和恢復工作正常。

感謝您的幫助，它讓我對反應性和$set方法有了更多的了解和見解。