时间戳

首页 > 解决方案 > 在使用 Vue-watch 监视的对象数组中，如何获取已更改对象的索引？

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

问题描述

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

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

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

我已经有了这样的设置，但它会查找任何对象中的更改，然后重新计算整个数组。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();

标签： arraysvue.jswatchcomputed-properties

解决方案

鉴于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
  }
}

推荐阅读