Currently, I have a form that is being edited and the created method is used to prefill the form information from an api call, which works perfectly fine.
However, my goal is to monitor the fields in the form. If any of them are edited, I want to set a variable called "isFormEdited" to true.
This is how I have it set up:
watch: {
'form': {
handler: function(v) {
console.log('form changed');
// Here is where I would set the "isFormEdited" variable to be true.
},
deep: true
},
The issue I am facing is that the console log occurs immediately upon page load because the form starts empty and then the created function fills the values with the api call data.
How can I work around this so that the "isFormEdited" value is only set to true when the form is actually manually changed?
created() {
const getForm = axios.get(`api/dashboard/form/${this.$route.params.id}/edit`);
const getFormTypes = axios.get('api/dashboard/form/types');
axios.all([getForm, getFormTypes])
.then(
axios.spread((...responses) => {
this.form = responses[0].data;
if(!this.form.type_id) {
this.form.type_id = "";
}
this.form.fields.map((field) => {
if(field.options){ field.options = JSON.parse(field.options); }
if(field.mime_types_allowed){ field.mime_types_allowed = JSON.parse(field.mime_types_allowed); }
return field;
});
this.types = responses[1].data.data;
})
)
.catch(errors => {
alert("Error");
console.log(errors);
});
Thank you very much for your help.