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.

Renat Galyamov

Hi, I'm Renat Galyamov

I'm a founder of and MED24.KZ.

A front-end developer with over 9 years of experience building businesses together with founders as well as large enterprises, such as Accenture, The British Museum, Admiral, Kimberley Process, 21st Century Fox and many others.

Subscribe to get my best articles in your inbox first

Join hundreds of weekly readers

I share my coding tips 💻, write about useful services ✌️ and share photos from beautiful places ⛰️

Write a Comment