¿Hay alguna manera en Vue de ver un objeto profundamente anidado y obtener las claves modificadas, no los valores?
Aquí hay un problema con el que me he topado: tengo una tabla que consta de miles de objetos. El usuario puede hacer clic en un objeto, abrir un modal basado en este objeto y enviarlo enviará una llamada API con el objeto que el usuario ha editado y, por lo tanto, reescribirá el objeto existente en la base de datos con él (no puede cambiar un campo en particular con este API, debe reescribir todo el objeto con uno nuevo basado en su versión anterior). Es muy simple cuando se trata de la edición de un solo objeto, pero los días buenos no duran y ahora necesito implementar una edición por lotes: selecciona los objetos necesarios, abre un solo formulario, realiza cambios y en Enviar vuelve a escribir no solo uno sino todos estos objetos en DB con campos editados. El problema aquí es que los objetos pueden tener valores diferentes y necesito preservarlos cambiando solo los editados en el modal.
Lo que hago ahora es recorrer uno de los objetos originales y el objeto en el modal, comparando sus campos y recopilando claves de campos que no son iguales. Dado que los objetos están anidados muy profundamente, puede imaginar los ifs y }}} escalones que tengo. De todos modos, obtengo los campos modificados de esta manera y en mis llamadas API envío objetos con sus campos no modificados conservados y nuevos campos actualizados aunque parece demasiado detallado. Estoy usando Vue en mi proyecto y es por eso que se me ocurrió la idea de un observador, pero no puedo encontrar la implementación que satisfaga mi necesidad.
Es posible especificar deep: true, en tu observador
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}); }, }, },