Vue deep copy object not changing value

Question

I have a vue component that has a deep copy of an asset called cachedAsset. It has a value called toDelete to mark a file for soft deletion. I have the following code

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

this works as intended it changes the.toDelete to true and the file is filterd out in a process further down the line.

The issue that I am having is with restoring the file back to the component with the following code

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

With this code it should set the.toDelete back to false but it is not doing that and I get no errors or anything in the console.

Can anyone tell me why this is not updating the.toDelete back to false when executed.?

Edit 1

this is what I have now

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

it seems to be setting it but the true still does not change to false..

am I still missing something? any further advice that can be given...

Answer 1

It happens when data is deeply nested. Try this Vue.delete . and also see Reactivity in Depth .

Answer 2

After re-analyzing the results with some console tests, I found that I had an error elsewhere in my code, once I fixed that the delete and restore are working properly.

Thank you for your assistance, it has given me more knowledge and insight on reactivity and the $set method.