如何在 Vuejs 中使用计算来观察深度数组

Question

我在 Vuejs 中制作了一个如下所示的组件。
但我的目标是我想获得 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它将是一个 object。 因此it != 'shoes' ，您的过滤器将返回一个空数组。

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

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

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

另外，我不太清楚为什么你的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
   },
}