Vue.js custom watchers

Sometimes you need to have a custom watcher to react to data changes.

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.

Related articles:

I write about coding tips 💻, interesting services ✌️ and places ⛰️

Subscribe to my newsletter

Write a Comment