如何在 VueJS 中找出监视数组中的哪个项目发生了变化？

Question

假设我在数据部分声明了一个数组

data() {
   return {
      myData : [{foo:2, bar:3},{foo:4,bar:5}]
   }
}

当我更改second 元素的bar 属性时，我想知道第二个元素已更改。

我的手表功能会是什么样子？

watch : {
  myData : {
     deep : true,
     handler(oldVal, newVal) {
      console.log("New val is the entire myData[] array which is not what I want", newVal);
      // I also want to know what index of the array the changed value belonged to.

     }
  }
}

Answer 1

首先，你的论点在观察者身上是倒退的，因为它应该是newVal, oldVal

另外，我认为这个警告可能适用于： https://vuejs.org/v2/api/#vm-watch

Note: when mutating (rather than replacing) an Object or an Array, the old value will be the same as new value because they reference the same Object/Array. Vue doesn’t keep a copy of the pre-mutate value.