[Vuejs]-Vue.js why my watcher is not working?

by

2👍

✅

To listen to changes for a property in an object you should add deep watcher. To do so add deep: true property to your watcher.

watch: {
  user: {
    handler: function (newUser, oldUser) {
      console.log('Old User Email: ', oldUser.email)
      console.log('New User Email: ', newUser.email)
    },
    deep: true
  }
}

Here is the updated pen

But if you are trying to make use of the oldUser , then the watcher cannot help you bacause:

Note: when mutating (rather than replacing) an Object or an Array, the old value will be the same as new value because they reference the same Object/Array. Vue doesn’t keep a copy of the pre-mutate value.

That’s the reason you see the same value for both newUser and oldUser when user.email is updated.

Reference – vm.watch API

👤Vamsi Krishna

0👍

If you want to watch for changes nested data you have to set deep option of watcher. However you can’t access an old data in handler as Vue doesn’t keep a copy of the pre-mutate value of objects. In your case, the code of your watch object should look like this below:

watch: {
  user: {
    handler: function (newUser) {
      console.log('New User Email: ', newUser.email)
    },
    deep: true
  }
}

Reference: Vue’s official API

👤Konrad Kalemba

Leave a comment