[FIXED] How to send a axios http put request only if there is a change on the object in Vue JS?

Issue

What is the logical way to send an axios http put request only if there is a change on the object and its properties?

I'm finding that I am firing unnecessary http requests which is a waste on the server power. I would like to limit to only firing if the object I am sending has been updated or changed from the original version when the page loaded.

My main reason for this is that I am using automatic saving on input via @blur and therefore there is a lot of action happening on the http front!

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

The method editInput() fires axios put http request every time. Needs a method to check for change?

Do you clone the object on the created() hook perhaps? And then use some method to compare... was what I attempted but failed.

Solution

You can always use a watcher, 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>

Answered By - Vucko

Answer Checked By - Robin (PHPFixing Admin)