How to Watch Deep Data Structures in Vue (Arrays and Objects)

Question

I have a object variable in which i need to watch some of the keys

My object

user{
 name,
 address,
 city,
 dob
}

So I need to watch address and city properties

so the way i am doing it as below

watch:{
   'user.address' : (new,old)=>{
             //do something    
          },
   'user.city' : (new,old)=>{
             //do something    
          },
}

Now what i want let say in future if i want to watch some more properties inside user object the one way is to add new watcher for that property as i did above, is there any other way that i can do it dynamically without writing watch everytime.

Thanks

Estus Flask · Accepted Answer · 2022-01-03 16:39:07Z

1

This is done by using deep watcher option:

watch:{
  user: {
    handler(new,old) {...},
    deep: true
  }
}

answered Jan 3, 2022 at 16:39

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

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

9 Comments

Mukesh Over a year ago

Hi @Estus I tried it is watching for all the properties inside that object I just wanted to watch specific properties, can you help me how to achieve that, as I wanted to check if some property value is changing than do something or else not.

Estus Flask Over a year ago

You can use imperative watcher like this.$watch(() => pick(this.user, ['address', '...']), (newVal, oldVal) => ...), or define a key dynamically for $watch . This could be XY problem, maybe you need computeds or to make a state easier to handle. I can't think of a good reason to do what you asked about.

Mukesh Over a year ago

Sorry i am new to Vuejs i am working on my first project so don`t know how, but i am trying to update one properties based on changes happening in some properties. my user object has multiple properties but i wanted to watch only some of them

Estus Flask Over a year ago

As said above, this is possibly solved with computeds. In my experience, the overuse of watchers means that computeds aren't used enough.

Mukesh Over a year ago

can you please update your answer with more details, sorry i am new so asking Thank you

|

Collectives™ on Stack Overflow

How to Watch Deep Data Structures in Vue (Arrays and Objects)

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related