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

0
votes

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.

2
javascriptvue.jshttpvuejs2axios
try using a watch property - Boussadjra Brahim

2 Answers

2
votes

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>
1
votes

You could watch deeply your property as follows :

watch: {
    person: {
        handler: (newValue,oldValue) {

        },
        deep: true
    }
}