Vue.js custom watchers

In this tutorial, you’ll learn how to create custom watchers to react to data changes in Vue.js.

For example, you need to check if the user updated his/her name in your app not just triggered a change event. You can do that by adding a custom watcher for a name property that will check if the value indeed changed.

var vm = new Vue({
  el: '#demo',
  data: {
    name: '',
    nameChanged: false
  },
  watch: {
    name (val, oldVal) {
      if (val !== oldVal) this.nameChanged = true
    }
  }
})

If the name changed a nameChanged property will be set to true.

If you find this post useful, please let me know in the comments below. 
Cheers,
Renat Galyamov

Want to share this with your friends?
👉renatello.com/vue-js-custom-watchers

PS: Make sure you check other Vue.js tutorials, e.g. Top 5 CSS frameworks for your Vue.js project (2019) or array length watcher in Vue.js.