How to listen for props changes

Question

In the VueJs 2 0 docs I can t find any hooks that would listen on props changes    Does VueJs have such hooks like onPropsUpdated   or similar   Update  As  wostex suggested  I tried to watch my property but nothing changed  Then I realized that I ve got a special case    lt template gt       lt child  my-prop  myProp  gt  lt  child gt   lt  template gt    lt script gt     export default         props    myProp         lt  script gt    I am passing myProp that the parent component receives to the child component  Then the watch   myProp       is not working

User · Answer

for two way binding you have to use  sync modifier   lt child  myprop sync  text  gt  lt  child gt    more details      and you have to use watch property in child component to listen and update any changes  props    myprop      watch         myprop  function newVal  oldVal       watch it       console log  Prop changed     newVal      was     oldVal

User · Answer

I work with a computed property like       items           get                return this resources                     set v               this  emit  update resources   v                     Resources is in this case a property   props     resources

User · Answer

I use props and variables computed properties if I need create logic after to receive the changes  export default   name   getObjectDetail   filters      components      props        objectDetail          type  Object        required  true          computed         objectDetail            let value   false                      if  someValidation

User · Answer

if myProp is an object  it may not be changed in usual  so  watch will never be triggered  the reason of why myProp not be changed is that you just set some keys of myProp in most cases  the myProp itself is still the one  try to watch props of myProp  like  myProp a  it should work

User · Answer

JoeSchr has an answer  Here is another way to do if you don t want deep  true  mounted         this yourMethod           re-render any time a prop changes     Object keys this  options props  forEach key   gt          this  watch key  this yourMethod

User · Answer

Have you tried this     watch      myProp           the callback will be called immediately after the start of the observation     immediate  true       handler  val  oldVal             do your stuff               https   vuejs org v2 api  watch

User · Answer

The watch function should place in Child component  Not parent

User · Answer

You can watch props to execute some code upon props changes    x000D   x000D  new Vue   x000D    el    app   x000D    data    x000D      text   Hello  x000D       x000D    components    x000D       child      x000D        template    lt p gt    myprop    lt  p gt    x000D        props    myprop    x000D        watch     x000D         myprop  function newVal  oldVal       watch it x000D            console log  Prop changed     newVal      was     oldVal  x000D            x000D          x000D        x000D      x000D      x000D   lt script src  https   unpkg com vue dist vue js  gt  lt  script gt  x000D   x000D   lt div id  app  gt  x000D     lt child  myprop  text  gt  lt  child gt  x000D     lt button  click  text    Another text   gt Change text lt  button gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You need to understand  the component hierarchy you are having and how you are passing props  definitely your case is special and not usually encountered by the devs      Parent Component -myProp-  Child Component -myProp-  Grandchild   Component   If myProp is changed in parent component it will be reflected in the child component too    And if myProp is changed in child component it will be reflected in grandchild component too   So if myProp is changed in parent component then it will be reflected in grandchild component   so far so good    Therefore down the hierarchy you don t have to do anything props will be inherently reactive   Now talking about going up in hierarchy  If myProp is changed in grandChild component it won t be reflected in the child component  You have to use  sync modifier in child and emit event from the grandChild component   If myProp is changed in child component it won t be reflected in the parent component  You have to use  sync modifier in parent and emit event from the child component   If myProp is changed in grandChild component it won t be reflected in the parent component  obviously   You have to use  sync modifier child and emit event from the grandchild component  then watch the prop in child component and emit an event on change which is being listened by parent component using  sync modifier   Let s see some code to avoid confusion  Parent vue   lt template gt       lt div gt       lt child  myProp sync  myProp  gt  lt  child gt       lt input v-model  myProp   gt       lt p gt   myProp   lt  p gt   lt  div gt   lt  template gt    lt script gt       import child from    Child vue       export default          data                return                  myProp  hello                                   components               child                  lt  script gt    lt style scoped gt   lt  style gt    Child vue   lt template gt   lt div gt     lt grand-child  myProp sync  myProp  gt  lt  grand-child gt       lt p gt   myProp   lt  p gt   lt  div gt    lt  template gt    lt script gt      import grandChild from    Grandchild vue       export default          components               grandChild                    props   myProp            watch                myProp                     this  emit  update myProp  this myProp                                  lt  script gt    lt style gt    lt  style gt    Grandchild vue   lt template gt       lt div gt  lt p gt   myProp   lt  p gt       lt input v-model  myProp   input  changed   gt       lt  div gt   lt  template gt    lt script gt      export default          props   myProp            methods               changed event                   this  emit  update myProp  this myProp                                 lt  script gt    lt style gt    lt  style gt    But after this you wont help notice the screaming warnings of vue saying       Avoid mutating a prop directly since the value will be overwritten   whenever the parent component re-renders     Again as I mentioned earlier most of the devs don t encounter this issue  because it s an anti pattern  That s why you get this warning    But in order to solve your issue  according to your design   I believe you have to do the above work around hack to be honest   I still recommend you should rethink your design and make is less prone to bugs   I hope it helps

User · Answer

Not sure if you have resolved it  and if I understand correctly   but here s my idea   If parent receives myProp  and you want it to pass to child and watch it in child  then parent has to have copy of myProp  not reference      Try this    new Vue     el    app     data        text   Hello         components         parent           props    myProp          computed            myInnerProp     return myProp clone        eg  myProp slice   for array                     child           props    myProp          watch            myProp val  oldval    now val will differ from oldval                         and in html    lt child  my-prop  myInnerProp  gt  lt  child gt    actually you have to be very careful when working on complex collections in such situations  passing down few times

User · Answer

He   in my case I needed a solution where anytime any props would change  I needed to parse my data again  I was tired of making seperated watcher for all my props  so I used this     watch         props          handler             this parseData                   deep  true        immediate  true           Key point to take away from this example is to use deep  true so it not only watches  props but also it s nested values like e g  props myProp  You can learn more about this extended watch options here  https   vuejs org v2 api  vm-watch

User · Answer

For me this is a polite solution to get one specific prop s  changes and create logic with it  I would use props and variables computed properties to create logic after to receive the changes  export default   name   getObjectDetail   filters      components      props      objectDetail        lt --- we could access to this value with this objectDetail     type  Object      required  true        computed       objectDetail        let value   false                   if    do    while -- whatever logic        insert validation logic with this objectDetail  prop value      value   true                return value           So  we could use  objectDetail on html render   lt span gt        objectDetail     lt  span gt    or in some method    literallySomeMethod  function        if  this  objectDetail

User · Answer

You can use the watch mode to detect changes   Do everything at atomic level  So first check if watch method itself is getting called or not by consoling something inside  Once it has been established that watch is getting called  smash it out with your business logic   watch       myProp  function        console log  Prop changed

[javascript] How to listen for 'props' changes

Examples related to javascript

Examples related to vue.js

Examples related to vuejs2

Examples related to vue-component