VueJS 2.0 - Can't hook a component on props update

Question

I need to force re-render component on update to be able to call FB.XFBML.parse(). However, no matter what I do I am not able to invoke any lifecycle hook beforeUpdate/updated when a property updated. (According to docs it only listens for data updates which props obviously aren't).

<template>
  <div>
    {{myProp}}
  </div>
</template>

<script>
  export default {
    props: ['myProp'],

    watch: {
       myprop: function(newVal, oldVal) { // watch it
            console.log('Prop changed: ', newVal, ' | was: ', oldVal)
       }           
    },

    updated(){ // never invoked},

    beforeUpdate(){ // never invoked }

  }
</script>

I can see that the property channel changed when sending different values from a parent component.

Is there a hook to listen for props changes?

Update

As @chris suggested, I tried to watch my property but nothing changed. Then I realized that I've got a special case:

<template>
    <child :my-prop="myProp"></child>
</template>

<script>
   export default {
      props: ['myProp']
   }
</script>

I am passing myProp that the parent component receives to the child component. Then the watch: {myProp: ...} is not working.

I believe mutation of the prop at the component level is not a desired behavior. Props are meant to flow one way - parent to child. An alternative way may be to create a computed property based on the prop and watch that one? vuejs.org/v2/guide/components.html#One-Way-Data-Flow — dispake
@dispake, I don't need to mutate myProp. I just need to know when it changed. When it a new myProp was sent from a "higher" (not only parent) component. — Amio.io
I would expect the prop to flow all the down to child and trigger watch in the child. Can you setup a jsfiddle demonstrating your usecase? — Christof
Yeah that's what I expected :) When things like this don't work it's usually something in your codebase. Are you using vue dev tools in Chrome? If not, definitely use them! Try going through your component tree and see if you can detect the prop changes in the parent first, then go down from there. — Christof
Your prop is myProp but you're watching myprop (lower-case). — ZachB

Christof Christof · Accepted Answer · 2017-06-16T08:49:08

What you're looking for is watch:

<script>
  export default {
    props: ['channel'],

    watch: {
      channel(newValue) {
        console.log(newValue)
      }
    }
  }
</script>

VueJS 2.0 - Can't hook a component on props update

1 Answers