How to watch deep array using computed in Vuejs

Question

I made a component like below in Vuejs.
But my goal is I want to get the value inside of filterdShoes of watch.

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

   computed {
      filteredAny(){
        return this.coor.filter(it=>['shoes','name'].includes(it));
      },
      filteredShoes(){
        return this.coor.filter(it=>it === 'shoes');
      },
     filteredName(){
        return this.coor.filter(it=>it === 'name');
      }

    }

    watch {
      filteredShoes(){
        console.log('The shoes are changed');
      }

    }

So I tried like below.But it says val is undefined.
I hope that 'val' is defined as 'coor' of data.
How can I fix this code? Thank you so much for reading this.

 watch {
      filteredShoes(val){  
        for(let i=0; i < val.length; i+=1){} 
      }

    }

You're hoping that 'val' of the watcher filteredShoes will be the filtered array from the computed prop filteredShoes? — Pei Qi Tea
– Pei Qi Tea, Commented Sep 22, 2019 at 3:41

Pei Qi Tea · Accepted Answer · 2019-09-22 05:28:57Z

Since this.coor is an array of objects, it will be an object. Thus it != 'shoes', and your filter will return an empty array.

Assuming you are using computed filteredShoes() like this:

<div v-for="shoe in filteredShoes"> ... </div>

Then you can just use the computed property, no need for the watcher. Everytime elements are added to/removed from the array, the computed prop will run. The computed property will not run if the properties of an object in the array are changed.

Also, I'm not quite sure why your this.coor has such a structure, so I'm using this:

coor: [
   { "name": 'Model 1', "shoes": 'Nike' },
   { "name": 'Model 2', "shoes": 'Reebok' }       
]
...
computed {
   filteredShoes(){
      let shoes = this.coor.filter(item => item.shoes === 'Nike');

      for(let i = 0; i < shoes.length; i++){ ... } // assuming you're modifying each object here

      return shoes; // return an array to be looped in HTML
   },
}

If you're trying to filter by type, I would recommend changing your coor to the following structure:

coor: [
   { "name": 'Model 1', "type": 'shoe' },
   { "name": 'Model 2', "type": 'shoe' }       
]
...
computed {
   filteredShoes(){
      let shoes = this.coor.filter(item => item.type === 'shoe');

      ...
      return shoes; // return an array to be looped in HTML
   },
}

Roohi Ali · Accepted Answer · 2021-09-13 05:58:27Z

2

If you need to deep computed in array, as bellow

  computed: {
    computedArray: {
      cache: false,
      get() {
        return this.sourceArray;
      },
    },
  },

answered Sep 13, 2021 at 5:58

Roohi Ali

7066 silver badges7 bronze badges

1 Comment

ktscript Over a year ago

not working in array of objects

Collectives™ on Stack Overflow

How to watch deep array using computed in Vuejs

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related