It seems like the issue you're encountering is related to the timing of when the @input event is fired compared to the @blur event. The @input event is fired immediately when the input's value changes, while the @blur event is fired when the input loses focus.
The problem might be due to the fact that the v-model directive updates the file_form object immediately on input, but the comparison with saved_file_form does not account for the reactivity of Vue.js. When you spread file_form to create saved_file_form, you're only creating a shallow copy, and since file_form is reactive, it might be getting updated in a way that your comparison function does not expect.
To ensure that you're comparing the current form state with the saved state correctly, you should create a deep copy of the file_form object when you initialize saved_file_form. You can use a utility function like JSON.parse(JSON.stringify(obj)) to create a deep copy.
Here's how you can modify your code:
const file_form = useForm({
name: props.afile.name,
type: props.afile.type,
phone: props.afile.phone,
});
let saved_file_form = JSON.parse(JSON.stringify(file_form)); // create a deep copy of file_form
function fileEditCheck() {
if (objectChanged(file_form, saved_file_form)) { // if changes in file form
state.action = 'file_edit';
} else {
state.action = 'file_show';
}
}
function objectChanged(obj_1, obj_2) {
return JSON.stringify(obj_1) !== JSON.stringify(obj_2);
}
// Template remains the same
By using JSON.stringify in the objectChanged function, you're comparing the serialized versions of the objects, which is a simple way to perform a deep comparison. However, be aware that this method can be inefficient for large objects and doesn't work with objects that contain functions, circular references, or non-serializable values.
If you need a more robust solution for deep comparison, consider using a utility library like Lodash, which provides a _.isEqual function that can handle deep object comparison more effectively.
// Using Lodash's isEqual function for deep comparison
import _ from 'lodash';
function objectChanged(obj_1, obj_2) {
return !_.isEqual(obj_1, obj_2);
}
Remember to install Lodash if you choose to use it:
npm install lodash
This should resolve the issue with the save button not disappearing when the form data is changed back to its initial state.
