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>

Does this answer your question? How to listen for 'props' changes — kissu
– kissu, Commented Jan 6, 2021 at 21:51

LastM4N · Accepted Answer · 2021-01-07 08:38:39Z

1

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();
    }
  }
}

answered Jan 7, 2021 at 8:38

LastM4N

2,2502 gold badges19 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

DengSihan · Accepted Answer · 2021-01-07 08:56:36Z

1

You forget the deep attribute for watcher

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

answered Jan 7, 2021 at 8:56

DengSihan

3,0762 gold badges23 silver badges51 bronze badges

1 Comment

theflucs Over a year ago

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.

Collectives™ on Stack Overflow

watcher in vuejs not working for props value

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related