鍍金池/ 問答/HTML/ Vue.js 如何在 data 里含數組的情況下，監(jiān)聽數組內指定屬性的變化？

Vue.js 如何在 data 里含數組的情況下，監(jiān)聽數組內指定屬性的變化？

在含有數組的時候，不知道watch里該如何寫，可以監(jiān)聽單個屬性值的變化（而不是監(jiān)聽整個數組的變化）。

代碼如下：

data: {
    items: {
        [
            {
                'name': 'zxxxx',
                'a': false,
                'b': true
            },
            {
                'name': 'zxxxx',
                'a': false,
                'b': true
            },
            {
                'name': 'zxxxx',
                'a': false,
                'b': true
            }
        ];
    }
},
watch:{
    items:{
        handler:function(val,old){
            // code...
        },
        deep:true
    }
}

如果 items 里沒有數組結構，直接是鍵值對，watch 里可以寫成 items.key，但是有了數組，不知道該怎么寫了。上面的代碼是深度監(jiān)聽，不僅過重，有時甚至無法達到想要的效果。求指教~

回答
編輯回答
青瓷

  1. 如果你要監(jiān)聽某個索引的某個屬性也是能寫的。。。

    watch: {
    'items.2.name': foo
}
  2. 如果是所有子項的某類屬性，先使用計算屬性做個計算（比如字符串全部拼接，數字求和）,然后watch這個計算屬性，來獲取屬性變化的實際，但是不能準確具體的拿到變化的值的位置信息（index、key）。
  3. 然后我覺得你可以換種解決方式，你的最終邏輯目的是什么，值的變化是什么引起的？能不能從操作的地方入手，比如是用戶使用input修改了這個值，能不能提交的時候直接提供index和key屬性，直接獲取變化位置呢？
2018年5月30日 09:50
編輯回答
孤慣

除了一個一個寫外，比如監(jiān)聽數組0中的name，就寫成'items.0.name'，顯然這不現實。
還有一個方法是將你要用到的數組中的數據寫在computed中，然后去監(jiān)聽這個computed的值，當數組變化時也會觸發(fā)watch。

computed: {
    itemsA: function () {
        let a = this.items.forEach( () => XXX)
        return a
    }
}
watch:{
      itemsA:{
        handler:function(val,old){
          console.log(val,old)
        },
      }
},
2018年1月15日 09:24