After importing a list from a database using axios and storing it in a variable called tasks, each object may resemble the following structure:
tasks: [
{ title: 'some text here' },
{ completed: false },
]
If there are 2000 or 3000 of these objects, on the frontend I create a checkbox for each task that toggles the boolean value of "completed" between true and false.
<li v-for="task in tasks">
<input type="checkbox" v-model="task.completed">
<label :for="task.title">{{task.title}}</label>
</li>To update my database with changes made to these tasks, I use the submit method:
submit(){
return axiosComponent.updateTask(this.tasks)
}
The issue arises when clicking on submit as it saves all tasks in the list, potentially causing timeouts due to the large number of objects being processed.
The goal is to modify the submit method to only save data that has been changed. If only two tasks have their "completed" status altered, then only those two tasks should be saved to the database, not the entire list.
I am unsure if this optimization can be solely done on the frontend or if backend modifications are required. Below are snippets of my backend code:
The axios component:
updateTask(tasks){
return axios.put('task/updateStatus', tasks)
}
The controller managing axios data:
@PutMapping("/updateStatus")
public void updateStatusOnTask(@RequestBody List<TaskEntity> taskEntities){
taskManager.updateTaskStatus(taskEntities);
}
The manager function handling task updates:
public void updateTaskStatus(List<TaskEntity> taskEntities) {
taskRepository.saveAll(taskEntities);
}
One approach I tried was creating computed properties to store checked and unchecked tasks separately, and then passing these into the submit method instead of the original "tasks" object:
completedTasks(){
if(this.tasks){
return this.tasks.filter(task => task.completed)
}
},
unresolvedTasks(){
if(this.tasks){
return this.errors.filter(task => !task.completed)
}
},
submit(){
return axiosComponent.updateTask(this.completedTasks)
}
However, the drawback with this method is that the changes are not reflected in the main "tasks" object, ultimately leading to values being overwritten once the page is reloaded. Additionally, if there are many unresolved tasks, saving changes to them could still result in timeout issues.