watcher in vuejs not working for props value

Question

I am working on vue app. The issue I am facing here is that I want to run a method if props has value and in my case manager value. So I am trying something like this but the debugger is not called in the watcher. Please help me find where I am going wrong.

<script>
  export default {
    props: ['manager'],
    watch: {
      manager: function (value) {
        debugger
        if(value) {
          this.validationManager();
        }
      }
    },
    methods: {
      validationManager(){
        console.log("Hello")
      }
    }
  };
</script>

please check this https://stackoverflow.com/a/65197837/8172857 — Boussadjra Brahim, Jan 06 '21 at 21:50
Does this answer your question? [How to listen for 'props' changes](https://stackoverflow.com/questions/44584292/how-to-listen-for-props-changes) — kissu, Jan 06 '21 at 21:51

score 1 · Accepted Answer · answered Jan 07 '21 at 08:38

We can definetely watch the props, please try this:

watch: {
  manager: {
    // the callback will be called immediately after the start of the observation
    immediate: true, 
    handler (val, oldVal) {
      //do your stuff here
      this.validationManager();
    }
  }
}

score 1 · Answer 2 · answered Jan 07 '21 at 08:56

1

You forget the deep attribute for watcher

    watch: {
      manager: {
        handler(value){
          if(value) {
            this.validationManager();
          }
        },
        immediate: true,
        deep: true,
      }
    }

answered Jan 07 '21 at 08:56

DengSihan

2,119
1
13
40

If the prop is not a boolean, ```deep: true``` is needed to detect changes. Also, you can try 'forcing' it with `if (val !=== oldVal)` inside of `handler (val, oldVal) { //do your stuff here this.validationManager(); }` following @Stefanos_Apk's answer. @Ntx answer should work. – the_flucs Jan 07 '21 at 11:00

watcher in vuejs not working for props value

2 Answers2