What is the best way to trigger an axios HTTP PUT request in Vue JS only when there are changes to the object?

Question

What is the best way to trigger an axios HTTP PUT request in Vue JS only when there are changes to the object?

How can I optimize my axios http put requests to only be sent when an object changes?

I've noticed that unnecessary requests are being made, putting strain on the server. I want to limit this by only sending a request if the object has been updated or modified since it was initially loaded on the page.

One of the main reasons for this is that automatic saving on input via @blur is causing frequent http activity.

<input @blur="editInput()"></input>

The editInput() method triggers an axios put http request every time. Is there a way to check for changes before making the request?

Should I clone the object in the created() hook and then use a comparison method? This was my initial attempt but it didn't work as expected.

javascript vue.js http vuejs2 axios

Answer 1

Answer №1

One approach is to utilize a watcher, as shown in the following example:

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    foo: {
      bar: {
        baz: 'foo bar baz'
      }
    }
  },
  watch: {
    message(newValue, oldValue) {
      if (newValue != oldValue) alert('change 1')
    },
    'foo.bar.baz'(newValue, oldValue) {
      if (newValue != oldValue) alert('change 2')
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>

  <input v-model="message">
  <input v-model="foo.bar.baz">

</div>

Answer 2

One approach is to utilize a watcher, as shown in the following example:

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    foo: {
      bar: {
        baz: 'foo bar baz'
      }
    }
  },
  watch: {
    message(newValue, oldValue) {
      if (newValue != oldValue) alert('change 1')
    },
    'foo.bar.baz'(newValue, oldValue) {
      if (newValue != oldValue) alert('change 2')
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>

  <input v-model="message">
  <input v-model="foo.bar.baz">

</div>

Answer 3

Answer №2

To keep a close eye on your property, consider the following approach:

monitor: {
  occupant: {
    observer: (latestValue, previousValue) {

    },
    comprehensive: true
  }
}

Answer 4

To keep a close eye on your property, consider the following approach:

monitor: {
  occupant: {
    observer: (latestValue, previousValue) {

    },
    comprehensive: true
  }
}

What is the best way to trigger an axios HTTP PUT request in Vue JS only when there are changes to the object?

Answer №1

Answer №2

Similar questions

Conceal the URL and any parameters upon successful completion of AJAX request

Running multiple npm scripts on both Unix and Windows systems can be achieved by using the "npm

Vue.js will trigger the updated() method only when a particular array undergoes changes

Dragging a stack of cards in a game of Solitaire using jQuery UI

What is the best way to format a lengthy SQL query as a JavaScript variable?

Is there a way to transform a large gltf file into jsx format?

Bespoke String Implementation

Retrieve data from FileReader's onload event asynchronously in Javascript

Customize your jQuery 3.x version by adding Ajax functionality tailored to your

Error: Unable to access classList property of null object

Populate the attributes of an alpaca with a variable

Next step is transferring form data from React to Node server

Trouble obtaining dates and values in JSON while analyzing Commodity Data Charts

React navigator appears stuck and unable to navigate between screens

Function in AngularJS to increment counts based on matching names

Creating a line of functions pool in Javascript with a delay feature

Tips for successfully mocking axios.get in Jest and passing AxiosPromise type value

Utilize Angular2 with ES6 modules while running an Express server

Angular directive for concealing the 'ancestor' of an element

Enhancing a JQuery Element to Suit Your Needs