Obtengo datos de db mediante el gancho onMounted y muestro el objeto en un formulario. Cuando el usuario hace clic para guardar, solo quiero verificar si los datos del objeto han cambiado o no.
onMounted(async () => { loadingBasic.value = true const doc = await getDocument('workspaces',props.uid) //doc is ref({}) also wspace.value = doc.value loadingBasic.value = false })Creé un objeto de solo lectura, pero cuando el objeto wspace ha cambiado, el objeto de solo lectura también cambia. ¿Cómo puedo crear una copia inicial sin cambios de un objeto ref?
Por cierto, ¿existe otra manera fácil de verificar los cambios en el formulario?
Está copiando solo la referencia con wspace.value = doc.value Puede copiar valores con:
wspace.value = {...doc.value} let doc1 = {a: 1, b:2} let doc2 = {a: 1, b:2} let wspace1 = doc1 let wspace2 = {...doc2} wspace1.a = 3 wspace2.a = 3 console.log('wspace1 :', wspace1) console.log('doc1 :', doc1) console.log('wspace2 :', wspace2) console.log('doc2 :', doc2)Algunas sugerencias :
shallow copy , debe hacer deep copy de un objeto para mantener el estado inicial. Puedes comprobar la diferencia en ambos aquí .JSON.parse(JSON.stringify(object)){...obj} y asignando el resultado a una nueva variable.demostración:
const doc = { value: { id: 1, name: 'alpha' } }; // making a deep copy const deepCopy = {...doc.value} // As user did not make any changes in the form. Comparision should return true. console.log(JSON.stringify(deepCopy) === JSON.stringify(doc.value)); // True // User making some changes in the form. deepCopy.id = 2; deepCopy.name = 'beta'; // As user make changes in the form data. Comparision should return false. console.log(JSON.stringify(deepCopy) === JSON.stringify(doc.value)); // False