How to watch the different key in a same array in Vuejs

Question

I have a code like below.

data():{
   coor: [
          { "name": '',
            "shoes": '' },
          { "name": '',
            "shoes": '' }       
         ]

watch:{
   coor: {
       handler(){
          console.log('changed')
       }
       ,deep: true
   }
}

In this case if whichever value in coor is changed, watch works.
But my goal is I want to make the case divided by two like below.

watch:{
       coor.name: {
           handler(){
              console.log('The name is changed')
           }
           ,deep: true
       },
       coor.shoes: {
           handler(){
              console.log('The shoes are changed')
           }
           ,deep: true
       }
    }

But it doens't work well. How can I solve this problem? Thank you so much for reading.

your coor.name and coor.shoes is undefined... it should be coor[0].name... but that is hardcoded solution and not good... — curious lad
– curious lad, Commented Sep 22, 2019 at 12:40

Steven Spungin · Accepted Answer · 2019-09-22 10:42:45Z

2

Create a computed property of the items you want to watch, and watch that instead.

computed {
  filteredAny(){
    return this.coor;  
    // you can also use map here and combine values to create a key.
    // return this.coor.map(it=>it.shoes+':'+it.name)
  },
  filteredShoes(){
    return this.coor.map(it=>it.shoes);
  },
  filteredName(){
    return this.coor.map(it=>it.name);
  }

}

watch {
  // deep not needed.
  filteredShoes(){
    console.log('The shoes are changed');
  }

}

edited Sep 22, 2019 at 10:42

answered Sep 21, 2019 at 10:48

Steven Spungin

29.6k7 gold badges97 silver badges85 bronze badges

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

3 Comments

DD DD Over a year ago

Could you write the code exactly? I dont't understand well by just text.

DD DD Over a year ago

I have a question. Your code works when I typed, "return this.coor.filter(it=>it.name === 'name');" . Than is it has to add "it.name" not "it". But How can I modify for the any case?

Steven Spungin Over a year ago

I am going to update the solution based on your comment. Let me know if it works.

Collectives™ on Stack Overflow

How to watch the different key in a same array in Vuejs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related