How can I effectively monitor and manage updates in my Vue app that is performing CRUD operations?

In my current project, I am developing a Vue application that utilizes Vuex to retrieve objects from an API. These objects are displayed in tables with paging functionality and are retrieved in batches from the API, sometimes containing nested entities. The user can edit the data via input fields within the table and add new entries through modals.

One challenge I face is determining which changes need to be sent back to the API for saving when the user decides to save all edits made.

  • One approach would be to track every change on each input field and mark the corresponding object as "dirty."
  • Another idea involves creating a deep copy of the fetched data and conducting a deep comparison to identify any dirty elements.
  • However, I'm interested in exploring alternative solutions, hence my question: Is there an Idea 3 that offers a better approach than Idea 1 or Idea 2?

If neither Idea 3 nor Idea 2 prove to be the ideal solution, I truly hope it's not Idea 1. Managing change handlers for numerous input fields can become overly complex, especially if users revert their edits back to the original values.

The process of making a deep copy and performing a deep comparison at least confines the issue to two distinct areas of code. Nevertheless, I believe there must be a more efficient method out there. If this method turns out to be the best option (which I also hope isn't the case), should I develop the deep copy/deep compare functionality myself, or are there existing packages that could facilitate this task?

Answer №1

It appears that you currently have the last UI state and wish to save it on the server. Instead of sending only the changes, I recommend sending the entire final state and replacing whatever is stored on the server.

For example, if you are dealing with user settings, rather than sending which settings were updated, simply send the complete new set of settings.

Answer №2

It is crucial to handle heavy tasks on the server rather than burdening the client most of the time. Following Asad's advice seems like the right approach. It's important to avoid creating large object differentials; in this day and age (2022), prioritizing performance is key.

Consider the nature of your app as well, as it may influence the decision. Your API provider might have valid reasons for their stance, not solely based on performance. Schedule a meeting with your team/PO to explore feasible options.

You can also implement some solutions on your end, such as looping through inputs without manual intervention.


In summary: Have a discussion within your company considering specific constraints. All possible solutions have been mentioned, and delving into opinion-based questions is not suitable for SO.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Initiating Internet Explorer using the APTool application for Selenium automation

Have you ever encountered a situation where you needed to open Internet Explorer from the start menu with the right-click option open with *apptool and then navigate to a specific webpage? I wonder, is it possible to automate this process using Selenium W ...

Reducing file size through compression (gzip) on express js version 4.4.1

My express js app is functioning as a web server, but I am having trouble with serving unzipped static content (js and css files). I have tried using compression from https://github.com/expressjs/compression, but it doesn't seem to be working for me. ...

What is the best way to assign v-avatar to chips within the children of a multiselect v-select component

I am looking to achieve a design similar to the one shown in this image: https://i.sstatic.net/8GHOX.png I managed to create it using the following code: <template> <div> <label class="form-label">{{ label }}</label&g ...

Leverage cookies within a custom service in AngularJS

I attempted to implement angular cookies within a custom service, only to encounter the following error: Unknown provider: ngCookiesProvider <- ngCookies <- checkLoginService My approach involves storing modules, controllers, and services in separat ...

"Implementing a new dynamic route post-deployment in Nuxt: A step-by-step guide

After successfully deploying my site on AWS using nuxt generate with dynamic routes, I encountered an issue. I wanted to add a new route without having to go through the entire deployment process again. For example: /post/1 /post/2 /post/3 ------- alread ...

What is the best method for transferring data from Firestore into a Vue CLI project?

I am currently facing a challenge in importing data from a Firestore Database into my Vue CLI project. Despite following multiple tutorials, I have not been successful in making it work correctly. It appears that I am encountering difficulties in retrievin ...

JSON.Parse allows for graceful degradation of data when handling JSON objects in JavaScript

What should be done if a browser does not support JSON.parse? Would it be appropriate to include json.js and use parseJSON instead? Here's an example of how the code could look: var output; if (JSON.parse) output = JSON.parse(data); else ou ...

Exploring the Depths of Web Scraping: A Guide to Scraping Within a Scraped Website

I have successfully scraped data from a specific page, but now I need to follow another href link in order to gather more information for that particular item. The problem is, I am unsure of how to do this. Here is an excerpt of what I have accomplished s ...

Having trouble finding the correct output when searching in the table using regex

I am currently experiencing an issue with my code for searching. When I search the full text, it works fine but when I search for a middle character, it does not work as expected. For instance, searching for "apple" or "ap" works correctly, however, if I ...

Implementing a delay using setTimeOut function to execute an action upon user input

Take a look at this code snippet: $("#test").on("keyup", (e) => { if(e.target.value.length === 3) { setTimeout(() => { console.log("fired") }, 2000) } }) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.m ...

Leveraging the power of the 'var' keyword in JavaScript when

I have a javascript code snippet that looks like this: var grade_type = document.getElementById("grade_type").value; gradesRef.set({ grade_type: firebase.firestore.FieldValue.arrayUnion(grade) }); However, when the data is stored i ...

Refresh the Server Component once data has been modified by the Client Component within Next.js

I am still grappling with this specific scenario and trying to figure out the best approach in Next.js 13. Can anyone provide guidance on the correct way to handle this? In a Server Component, I have a list of users being displayed, leveraging MongoDB, as ...

C# variable value not being retrieved by jQuery

When I implemented the jQuery scripts in my .aspx file, everything worked perfectly. Here is the code snippet: $(function() { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C+ ...

I am looking to pair a unique audio clip with each picture in my collection

I have implemented a random slideshow feature that cycles through numerous images. I am now looking to incorporate a brief audio clip with each image, synchronized with the array I have established for the random pictures. The code snippet below is a simil ...

Guide on integrating web api on android with javascript, jquery, and jsonp

I am attempting to create a button in my Android application that, when clicked, retrieves information from a web API and displays the results on my screen. Here is the code that performs the necessary tasks, but I need to integrate it into my Android pag ...

Incorporate a fontawesome icon into a dynamically created button using ajax

Is it possible to insert fontawesome icons into a button created using this code snippet? $.each(response, function (i, item) { trHTML += '<tr><td>' + item.name + '</td><td>' + "<input type='button&apo ...

Ways to show a component based on a specific condition being met using react and javascript

On every page, the layout component is rendered. My goal is to achieve the following: on /items page *Display Layout component only if user is admin *Do not display Layout component if user is non-admin Below is my code snippet: function Main() { con ...

Trouble expanding Bootstrap Dropdown menu on mobile devices

I am currently facing an issue with a Bootstrap navbar that includes a dropdown menu for selecting courses. On my desktop, everything works perfectly fine when I click on the courses tab. However, when I try to select a course on mobile, nothing happens. ...

Acquire the item that is found in every array (Javascript)

In my data, I have multiple arrays like the following: { names: [0, 1, 2], gender: [2, 5, 1], boolean: [7, 2, 1, 6] } Is there a way to extract the value that appears in all arrays? For example, how can I retrieve the value 1 since it is prese ...

Communication through HTTP requests is not supported between docker containers

I currently have two applications running as services within a docker-compose environment. My React App A Node.js server In an attempt to make an HTTP request from my React app to the Node.js server, I am using: fetch("http://backend:4000/") However, w ...