Question

我有一个 vue 组件，它有一个名为 cachedAsset 的资产的深层副本。它有一个名为 toDelete 的值来标记文件以进行软删除。我有以下代码

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

这会按预期工作，它将 .toDelete 更改为 true，并且文件会在后续的进程中被过滤掉。

我遇到的问题是使用以下代码将文件恢复到组件

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

使用此代码，它应该将 .toDelete 设置回 false，但它没有这样做，并且我在控制台中没有收到任何错误或任何内容。

谁能告诉我为什么这不会在执行时将 .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 方法有了更多的了解和洞察。

Vue深拷贝对象不改变值

2 个答案: