The proper method for updating data on a backend API using Axios and Vue

Question

The proper method for updating data on a backend API using Axios and Vue

I am working on a Vue application that includes several form fields. I want to ensure that any changes made by the user are saved in real-time to a backend database using a REST API with Axios, without requiring the user to click a save button.

I have two queries regarding this:

#1: Which event should I monitor to trigger my API calls?

Is it appropriate to use a v-on:change binding, or would this event be triggered too frequently (with every keystroke)?

<input type="text" v-model="userName" v-on:change="signalChange">

methods:{
     signalChange: function(evt){
        axios.put(this.getRootURL + 'app/save.php', {
        recordId: this.$route.params.recordid,
        userName: this.userName
      }).then(response => {
        console.log("Change saved...")
      }).catch(e => {
        console.log("Error... ")
    }
}

#2: Is it necessary to queue changes to ensure that the last change is saved properly?

For example, if a user quickly toggles a button back and forth, there might be a delay due to the asynchronous nature of Axios, causing the last change to not be saved last on the server. This could lead to a discrepancy between the UI and backend data.

Would it be advisable to create a Sync utility that stores changes in a queue array and waits for each change to complete before sending the next one to the server? Are there any existing libraries or code samples available for this purpose?

Thank you!

javascript vue.js axios

Answer 1

Answer №1

To enhance the process, consider implementing a timeout period to await additional changes. If no further adjustments are made within the specified time frame, proceed with saving the modification.

Monitoring the change event is effective. Alternatively, you can also utilize the input event.

The code sample provided below addresses both of your inquiries:

HTML/Template

<input type="text" v-model="userName" v-on:change="waitToSave">

JavaScript:

export default {
  data(){
    return {
      /* other relevant data */
      timeout: null,
      waitTime: 1000  // 1 second, or adjust as needed
    }
  },
  methods:{
    waitToSave: function(){
      clearTimeout(this.timeout);
      this.timeout = setTimeout(this.signalChange.bind(this), this.waitTime);
    },
    signalChange: function(){
      axios.put(this.getRootURL + 'app/save.php', {
        recordId: this.$route.params.recordid,
        userName: this.userName
      }).then(response => {
        console.log("Modification saved...")
      }).catch(e => {
        console.log("An error occurred... ")
      });
    }
  }
}

If the timeout suffices for your scenario, employing a queue might not be necessary as previously mentioned.

Answer 2

To enhance the process, consider implementing a timeout period to await additional changes. If no further adjustments are made within the specified time frame, proceed with saving the modification.

Monitoring the change event is effective. Alternatively, you can also utilize the input event.

The code sample provided below addresses both of your inquiries:

HTML/Template

<input type="text" v-model="userName" v-on:change="waitToSave">

JavaScript:

export default {
  data(){
    return {
      /* other relevant data */
      timeout: null,
      waitTime: 1000  // 1 second, or adjust as needed
    }
  },
  methods:{
    waitToSave: function(){
      clearTimeout(this.timeout);
      this.timeout = setTimeout(this.signalChange.bind(this), this.waitTime);
    },
    signalChange: function(){
      axios.put(this.getRootURL + 'app/save.php', {
        recordId: this.$route.params.recordid,
        userName: this.userName
      }).then(response => {
        console.log("Modification saved...")
      }).catch(e => {
        console.log("An error occurred... ")
      });
    }
  }
}

If the timeout suffices for your scenario, employing a queue might not be necessary as previously mentioned.

The proper method for updating data on a backend API using Axios and Vue

Answer №1

Similar questions

Having trouble with axios calls being caught in the catch block when mocking it in Jest

Firebase web authentication is most effective upon the second attempt

How can I properly implement a Closure or IIFE to manage an onclick event in ReactJS?

Npm is unable to locate the package.json file in the incorrect directory

How to send props from a Vue.js component tag in an HTML file

Creating a table with a static first column and vertical text positioned to the left of the fixed column

Tips for transforming a container div into a content slider

Asserting within a specific condition's scope in TypeScript

Ensuring that EJS IF/ELSE statements are evaluated accurately

Can I trust the security of my credentials if they are able to be logged in the console

Is it possible to display a title tooltip only when the CSS ellipsis feature is active in a React component?

Having trouble with sending a post request through ajax

Delaying UI interactivity until the document is fully loaded

The typescript error TS2339 is triggered by the property 'webkitURL' not being found on the 'Window' type

What is the reason for jQuery returning an integer instead of an object?

Identify the credit card as either American Express or American Express Corporate

What exactly is Bootstrap - a CSS framework, a JavaScript framework, or a combination

"Learn the trick to replace the Ctrl + N shortcut in Firefox and initiate an AJAX request

Displaying default value in select dropdown using v-model

It is not possible to submit two forms at once with only one button click without relying on JQuery