Need help with Vue update process for props/child components.
Consider this component:
<template>
<v-card>
<Modification v-model="newObject"></Modification>
<OtherComponent @close="resetObject"></OtherComponent>
</v-card>
</template>
<script>
import { MyClass } from "classes";
import Modification from "b";
import OtherComponent from "a";
export default {
name: "MyForm",
components: { OtherComponent, Modification },
props: {
existingObject: {
type: [MyClass, typeof undefined],
required: false,
default: undefined
}
},
data() {
return {
newObject: undefined
};
},
created() {
this.newObject =
this.existingObject !== undefined
? this.existingObject.clone()
: new MyClass();
},
methods: {
resetObject() {
this.newObject =
this.existingObject !== undefined
? this.existingObject.clone()
: new MyClass();
}
}
};
</script>
Definition of MyClass:
export class MyClass {
constructor({ a= null, b=null} = {}) {
this.a = a;
this.b = b;
}
toPayload(){
return { a:this.a , b:this.b };
}
clone() {
return new MyClass(this.toPayload());
}
}
This component receives an instance of MyClass, clones it and passes it to the Modification component for modification. However, after resetting the object, the Modification component does not update with the new values. Why is this happening? Any missing steps or Vue mechanisms I'm unaware of?
Note: Found a solution here to force updates on the Modification component.
Appreciate the help!
UPDATE:
Adding a computed property showing log information each time newObject is updated.
Also, adding
<span> {{ newObject.a }} </span>These tests confirm that the variable is reactive.
UPDATE 2:
The Modification component currently contains 2 Input components.
<template>
<v-card-text>
<ModifyA v-model="object.a" @input="handleInput" />
<ModifyB v-model="object.b" @input="handleInput" />
</v-card-text>
</template>
<script>
import { MyClass } from "classes";
import ModifyA from "...";
import ModifyB from "...";
export default {
name: "ShiftFormFields",
components: { ModifyA, ModifyB },
props: {
value: {
type: MyClass,
required: true
}
},
data() {
return { object: this.value };
},
methods: {
handleInput() {
this.$emit("input", this.object);
}
}
};
</script>
If ModifyA Input is added directly instead of within the Modification component like this:
<template>
<v-card>
<ModifyA v-model="newObject.a"></Modification>
<OtherComponent @close="resetObject"></OtherComponent>
</v-card>
</template>
The resetObject function also resets the value shown in the ModifyA component.