Aquí hay un ejemplo mínimo de mi problema. Traté de encontrar una pregunta similar en SO pero no encontré nada, lo siento si es un duplicado.
<template> <div> <SubComponent v-model="myValue" /> <SubComponent v-model="myClonedValue" /> </div> </template> <script> import SubComponent from "./components/SubComponent"; export default { components: { SubComponent }, data: function () { return { myValue: { foo: 45, bar: 38, }, }; }, computed: { myClonedValue: function () { return { ...this.myValue }; }, }, watch: { "myValue.foo": function (val, oldVal) { console.log(val, oldVal); }, /* This Doesn't work either "myClonedValue.foo": function (val, oldVal) { console.log(val, oldVal); }, */ myClonedValue: { handler: function (val, oldVal) { console.log(val, oldVal); }, deep: true, }, }, }; </script> <template> <input v-model="value.foo" type="text" /> </template> <script> export default { name: "SubComponent", props: { msg: String, value: Object, }, }; </script>En mi caso de uso principal, tengo un objeto que quiero modificar solo si se confirman los cambios. Así que clono sus valores con la propiedad calculada y, por alguna razón, necesito ver si se han modificado algunos valores. Mi problema aquí, como puede verlo en línea en este proyecto de CodeSandBox CodeSandBox, es que VueJS no detecta ningún cambio una vez que clono el valor de los datos. Si cambia la segunda entrada de mi ejemplo, no pasa nada.
Como puedo resolver esto ?
La propiedad calculada no solo clona el valor original una vez. Crea un enlace reactivo y vuelve a calcular cada vez que cambia el valor original. Así que necesitas un enfoque diferente.
Haga que clonedValue sea una propiedad de datos normal y asígnele un valor en el enlace del ciclo de vida creado o montado. Entonces podrá verlo como su valor original. Y lo que (supongo) es más importante, ahora podrá modificar los valores originales y clonados de forma independiente.
data: { myValue: { foo: 1, bar: 2 }, clonedValue: {} }, created() { this.clonedValue = {...this.myValue} }Puede usar observadores profundos para lograrlo, pero es posible que deba verificar las claves internas usted mismo
watch: { myValue: { handler (val, oldVal) { if(val.prop !== oldVal.prop){ // do something } }, deep: true, }, },