Watch props change on vuejs

Question

I want to use watch for a props on a child component, but it's not working.

Here is my code :

props: {
    searchStore: {
        type: Object
    }
},
watch: {
    searchStore(newValue) {
        alert('yolo')
        console.log(newValue)
    }

And it's unfortunately not working

I've looked on this post and tried everything and nothing work : VueJs 2.0 - how to listen for `props` changes

I checked my props with Vue Devtools and it's changing.

Thanks in advance to the community !

Are you sure you are using webpack/vue-cli type setup and not directly writing it in script file? That syntax is specific for such setup. — Mat J, Jul 12 '18 at 07:09

score 36 · Accepted Answer · edited Apr 20 '22 at 07:36

36

based on that code, it should work, so the issue may be somewhere else. Can you post more code?

if you want to run immediately, you can use immediate. This is the syntax:

  watch: {
    searchStore: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        
      }
    }
  },

The deep: true setting will deep-watch for a change within the object.

When you are updating parts of this object in the parent component, make sure you use Vue's $set function.

this.$set(this.searchStore, 'myKey', {price: 12.22});

further reading: https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

edited Apr 20 '22 at 07:36

Valentine Shi

6,604
4
46
46

answered Jul 11 '18 at 19:27

Daniel

34,125
17
102
150

1

thanks, the deep: true solved the problem. Still is it okay to let that in the code ? Would not trigger bug with time ? – foufrix Jul 12 '18 at 13:42
glad that worked, I've updated the answer, if you have a chance, have a read-through of the `Change Detection Caveats` section of the link – Daniel Jul 12 '18 at 14:32
ok thanks nice to know that, though i'm not planning on using it, the parents component is updating it, the child only read the data – foufrix Jul 12 '18 at 15:35
sorry that it wasn't clear, you **need** to do it (use `$set`) in the parent component – Daniel Jul 12 '18 at 16:02
1

In Vue 3, using `$set` is no longer necessary. You still need to use `deep` though. – Giulio Jan 24 '21 at 05:01
@Giulio good to know that it's now automatic on vue 3 ! So this means all nested object inside another one that where not declared previously on `data`, vue 3 will automatically watch them now ? – foufrix Jan 27 '21 at 10:08
@foufrix As I understand yes, objects shold be converted to proxies in 3. – Giulio Jan 28 '21 at 08:00

score 0 · Answer 2 · answered Jul 12 '18 at 06:57

Could be that 'searchStore' wasn't changing?

Since its an object, vue is watching for a new reference of an object to be passed.

Meaning (will not trigger watch):

roorSearchStore.a= newVal

will not trigger the watch (since the reference didn't change).

You could watch deep like Daniel says, Or do Object.assign like this:

rootSearchStore = Object.assign ({},roorSearchStore,{a:newVal}).

Or try to watch a timestamp of the changes in rootSearchStore .

Watch props change on vuejs

2 Answers2