javascript - 如何在Vuejs中查看同一数组中的不同键

Question

我有如下代码。

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

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

在这种情况下，无论 coor 中的哪个值发生变化， watch 都会起作用。
但我的目标是我想将案例除以二，如下所示。

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

但是效果不太好。我怎么解决这个问题？非常感谢您的阅读。

Answer 1

创建您想要观看的项目的计算属性，然后观看它。

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

}