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

How can you ensure that the object passed to a component becomes reactive in Vue?

Authenticate users using Laravel's default authentication system, then serve the Vuejs single page application only to logged

The Google Maps geocoding service fails to provide accurate location information

Looking to Move the Image Up?

Implementing jsGrid: Appending a row with JSON information

Docz: Utilizing Typescript definitions for props rendering beyond just interfaces

Displaying a collection of items using Rails, implementing form_for and integrating Ajax functionality

Vue: passing parameters between application and component through computed properties

Unable to connect beyond the local network using Socket.io

The console is displaying a null value outside of the block, however, the correct value is returned when

Is it possible to use a webcam to scan a QR code directly into a webpage?

Populate several input boxes with data derived from a single input field

Enhance the editing capabilities of the Json data form

Output JSON data from PHP for use in Javascript

Unexpected resizing of a div due to Vue animation

VueJS: Unable to access the 'name' property as it is undefined"

Inquiry into the use of Jquery.ajax()

Utilizing an array in a PHP URL and incorporating it into JavaScript operations

Error: Vue.js is unable to find the reference for "_vm.KisanData" and throws a TypeError

sending information back to the controller with get method (ajax, javascript)