如何使用 Vuejs 中的计算来观看深度数组

Question

我在 Vuejs 中制作了一个如下所示的组件。
但我的目标是我想获得 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');
      }

    }

所以我尝试如下。但它说 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
   },
}

如果您尝试按 type 进行过滤，我建议您将其更改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
   },
}