在使用 Vue-watch 监视的对象数组中，如何获取已更改对象的索引？

Question

我有一个对象数组，如下所示：

 myArray: [{
 name: "First",
 price: 10,
 rebate: 5,
 listPrice: 15,
 outcome: 0
 },{
 name: "Second",
 price: 11,
 rebate: 5,
 listPrice: 16,
 outcome: 0
}

每当同一对象中的任何其他值发生变化时，我都想重新计算outcome-值。

我已经有这样的设置，但它会查找任何对象中的更改，然后重新计算整个数组。我已经设法通过使用computed 和watch 函数的组合来设置它。然而，他们观察整个数组的变化，然后重新计算数组中所有对象的结果值。

我怎样才能观察变化然后重新计算只改变了的对象？

以下是我当前用于重新计算整个数组的函数（查看另一个属性），但我正在寻找的可能完全不同。

计算：

myArrayWasChanged() {
return [this.myArray.reduce((a, {vendors}) => a + vendors, 0), this.myArray.filter(item => item.discounted == false).length] 

观看：

myArrayWasChanged: {
handler: function (val, oldVal) {
this.recalculateIsVendor();

Answer 1

鉴于outcome 完全依赖于其他属性，它实际上并不是组件状态的一部分。因此，在组件的data 中，您可以存储没有outcome 的数组，然后计算新版本的数组将结果 作为计算属性。

data: function () {
  return {
    myArrayWithoutOutcome: [
    {
      name: "First",
      price: 10,
      rebate: 5,
      listPrice: 15
    },
    {
      name: "Second",
      price: 11,
      rebate: 5,
      listPrice: 16
    }]
  }
},
computed: {
  myArrayWithOutcome: function () {
    return this.myArrayWithoutOutcome.map(x => {
      return {...x, outcome: this.calculateOutcome(x)}
    })
  }
},
methods: {
  calculateOutcome(item) {
    // Logic to calculate outcome from item goes here
    return 0
  }
}