My form is connected to a data object called this.myData:
data: function() {
return {
isDataChanged: false,
myData: {},
myChangedData: {
default: '',
default1: {},
default2: []
},
}
},
The values in myData are populated from the server response and they fill out the form. On the other hand, myChangedData stores new values that are updated with
v-on:input="onChangeMyData($event, 'default')" onChangeMyData(e, name, required = false){
const val = e.target.value.trim();
this.myChangedData[name] = val;
console.log(this.myChangedData)
this.checkIsmyDataChanged();
},
I can use the same method by providing a key as the second parameter. The checkIsmyDataChanged method compares the properties of myChangedData with changedData to determine if any field has changed in the form, setting this.isDataChanged = true if there's a difference.
The challenge arises from the complex structure of mydata/mydatachanged. It contains objects under default1 and default2 is an array of objects. This makes using onChangeMyData impractical, requiring different methods with specific checks (validations) where this.checkIsmyDataChanged() needs to be invoked.
To address this, I implemented a watcher for myChangedData:
watch:{
myChangedData: {
handler: function (newVal) {
console.log('change')
},
deep: true
},
},
, however, it doesn't trigger on data changes