I've been struggling with this issue for a week now, hopefully someone here can help me out...
The application I'm working on was created using Laravel with Vue for the frontend.
Essentially, I have an array of objects that need to be sent to the backend to be stored in a database. The challenge lies in the fact that this is an editor and the page shouldn't reload every time a change is made. The data is retrieved using window.postMessage(), which seems to cause some lingering issues even after saving.
I've attempted to empty the array after calling the save function. Initially, it works fine because the array is empty, but from the third attempt onwards, some objects get duplicated and stored in the database.
Below is the code snippet:
saveNewSettings() {
//ARRAY TO BE EMPTIED (DECLARED IN DATA OBJECT)
/* this.newItems = [
{ id="123", name="a", otherProps="someProps" },
{ id="456", name="ab, otherProps="someProps" },
{ id="789", name="c", otherProps="someProps" },
]
*/
//EMPTY ARRAY USED FOR COMPARISON
// this.newlyCreatedItems = [];
if ( !this.newlyCreatedItems.length ) {
this.newlyCreatedItems = this.newItems;
} else {
for ( let i = 0; i < this.newItems.length; i++ ) {
for ( let j = 0; j < this.newlyCreatedItems.length; j++ ) {
if ( this.newItems[i].id == this.newlyCreatedItems[j].id ) {
this.newItems.splice( i, 1 );
}
}
}
}
//SENDING INFO TO BACKEND SERVICE
settingsService.save( this.newItems )
.then(response => {
//ACTION AFTER RESPONSE
});
}
The function behaves correctly the first and second time, only saving new items without duplication. However, starting from the third time, duplicates start appearing in the database.
If more information is required, please feel free to ask. Thank you all in advance for your assistance.