How to bind Vue js watchers to an array of objects

Question

I have an array that contains many objects like this :

[{x: updateX}, {y: updateY} ]

By using this array, I want to generate Vue js watchers automatically like this:

      watch: {
     x(){
         this.updateX()
       },
     y(){
         this.updateY()
       }
 }

I only know that vue keep watchers as array.

Hey, I don't really get the need. You want to bind watchers to all your array objects ? — Loïc Monard
– Loïc Monard, Commented Jun 3, 2019 at 9:52

Michael · Accepted Answer · 2019-06-03 10:28:47Z

1

you can create an array and return from it a list of functions something like this:

data(){ return {
  watcherArray: [];
}
}
methods: {
   pushToWatchersArray() {
      this.watcherArray.push(someValue);
    }
    returnNewWatchers(){
       return { this.watchersArray.map(watcher => return `${watcher}(){ 
       this.updatewatcher()}
    }
watch: {
    [...this.returnNewWatchers()]
 }

You may also need to rerender the component when changing the watchers, I am not sure about this, in addition you may need a separate watcher to watch for changes on the array to do this rerender.

answered Jun 3, 2019 at 10:28

Michael

5,1588 gold badges37 silver badges60 bronze badges

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

Comments

Neha · Accepted Answer · 2019-06-03 10:32:10Z

1

You can use a deep watcher for that

watch: {
  arr: {
     handler(val){
       // do stuff
     },
     deep: true
  }
}

answered Jun 3, 2019 at 10:32

Neha

2,3115 gold badges27 silver badges56 bronze badges

Collectives™ on Stack Overflow

How to bind Vue js watchers to an array of objects

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related