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方法有了更多的了解和见解。