javascript - 如何在 Vuejs 中使用计算来观看深度数组

Question

我在 Vuejs 中制作了如下所示的组件。
但我的目标是我想获取 watch 的filterdShoes内部的值。

   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');
      }

    }

所以我尝试如下。但它说 val 未定义。
我希望“val”被定义为数据的“coor”。
我该如何修复此代码？非常感谢您阅读本文。

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

    }

Answer 1

由于 this.coor 是一个对象数组，因此 it 将是一个对象。因此 it != 'shoes'，您的过滤器将返回一个空数组。

假设您正在使用计算的filteredShoes()，如下所示:

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

然后你可以只使用计算属性，不需要观察者。 每次向数组添加/删除元素时，计算的 prop 都会运行。 如果数组中对象的属性发生更改，计算属性将不会运行。

另外，我不太确定为什么你的 this.coor 有这样的结构，所以我使用这个:

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
   },
}

如果您尝试按类型过滤，我建议将您的 coor 更改为以下结构:

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
   },
}