I am currently facing an issue with updating values for an object received in a payload before saving it to the database. Despite making changes, the new values are not being persisted correctly. I am utilizing Vue.js 2 for this task. How can I effectively update the incoming object and store those updated values in an existing object?
Additional details: The data we receive from an API may contain existing key-value pairs or none at all depending on certain criteria such as username, birthday, or phone number. The goal is to update the personal information fields with any new values. However, instead of updating the new values, the data retains old changes without incorporating the updates. In this case, userPersonalInfo is not being updated.
ModalVerification.vue
onVerifySuccess(existingData) {
// if no object exists, complete new form
if(!Object.keys(existingData).length) {
this.completeFormModal();
} else {
this.meetingDetails.is_authenticated_user = true;
this.updateMeetPlanInformation(this.getMeetingPlanFields(existingData));
// only return existing data if object is not null; otherwise, update the existing data with new key/value pairs. This approach seems incorrect as it does not verify if any values have been updated before passing them.
const userPersonalInfo = (existingData === null) ? this.getUserPersonalInfo(existingData) : existingData;
vueAssign(this.meetingDetails, userPersonalInfo);
this.completeFormModal();
}
export function vueAssign(objVal, srcVal) {
Object.keys(srcVal).forEach((key) => {
Vue.set(objVal, key, srcVal[key]);
});
}