Is there a way in Vue to watch a deeply nested object and get the changed keys, not the values?
Here's a problem I've stumbled upon: I have a table consisting of thousands of objects. User can click on an object, open a modal based on this object and onSubmit it will send an API call with the object user've edited and thus rewrite the existing object in DB with it (you can't change a particular field with this API, you need to rewrite the entire object with a new one based on its previous version). It is very simple when dealing with single object editing, yet good days don't last and now I need to implement a batch editing - you pick the necessary objects, open a single form, make changes and onSubmit you rewrite not a single one but all these objects in DB with edited fields. The problem here is that objects may have different values and I need to preserve them by changing only the ones edited in the modal.
What I do now is I loop through the one of the original objects and the object in the modal, comparing their fields and collecting keys of fields that are not equal. Since the objects are very deeply nested you may imagine the ifs and }}} stairs I'm having. Anyway I get the changed fields this way and in my API calls I send objects with their not changed fields preserved and new fields updated though it looks too verbose. I'm using Vue in my project and this is why the idea of a watcher came to my mind, yet I cannot find the implementation that meets my need.
It's possible to specify deep: true, in your watcher
watch: {
myObject: { // or 'myObject.someNestedObject.someNestedValue' as key ( with quotes )
deep: true,
// immediate: true, // run watcher on mounted()
handler: (newVal, oldVal) => {
console.log({newVal, oldVal});
},
},
},