Javascript 如何在vue.js循环中实现运行平衡？

我有一张关于货币交易的表格，我想显示各种各样的流动余额

Initial Balance: 1000.00

| ID | Amount | Balance |
|----|--------|---------| 
|  1 | 100.00 |  900.00 |
|  2 | 150.00 |  750.00 | 
|  3 | 125.00 |  625.00 |

在我的js数据数组中，我有：

data: [

  balance: 1000.00,

  transactions: [
    { id: 1, amount: 100.00 },
    { id: 2, amount: 150.00 },
    { id: 3, amount: 125.00 },
  ],

],

我认为：

<tr v-for="transaction in transactions">
  <td>{{ transaction.id }}</td>
  <td>{{ transaction.amount }}</td>
  <td>{{ balance -= transaction.amount }}</td>
</tr>

{{transaction.id}
{{transaction.amount}}
{{余额-=transaction.amount}

但是，该值没有显示正确的值，因此

[Vue warn]：您可能有一个表达式为“balance-=transaction.amount”的观察者无限更新循环

---

如何正确实施这一点有什么想法吗？谢谢

发生这种情况的原因是，每次更新

余额

时，它都会导致生命周期事件并再次尝试设置

余额

。这发生在

balance-=transaction.amount

表达式中。您要做的是创建一个计算属性，或者创建一个方法来计算剩余余额

大概是这样的：

computed: {
  remainingBalance () {
    this.balance - this.transactions.reduce((c,a) => c + a.amount, 0)
  }
}

或者作为一种方法：

methods: {
  remainingBalance(balance, transactions) {
    balance - transactions.reduce((c,a) => c + a.amount, 0)
  }
}

然后在您的

v-for

中，您将用

remainingBalance

或

remainingBalance（balance，transactions）

替换

balance-=transaction.amount

（分别取决于您选择使用的是计算属性还是方法）

---

如果您需要解释

Array.prototype.reduce

的作用，请告诉我。

我也会建议像Taylor那样的计算属性，但采用另一种方法：将计算属性中的所有剩余余额计算为数组，然后在模板中为每个

$index

computed: {
  remainingBalance: function () {
    var tempBalance = this.balance
    return this.transactions.map((transaction) {
      return tempBalance -= transaction.amount
    })
    // [900, 750, 635]
  }
}

模板：

<tr v-for="transaction in transactions">
  <td>{{ transaction.id }}</td>
  <td>{{ transaction.amount }}</td>
  <td>{{ remainingBalance[$index] }}</td>
</tr>

{{transaction.id}
{{transaction.amount}}
{{remainingBalance[$index]}

对原始答案进行更多修改，以便正确操作。我们还必须定义索引

remainingBalance: function () {
            var tempBalance = this.balance
            return this.collection.map(function(transaction) {
                    tempBalance += (transaction.amount)
                    return parseFloat( tempBalance).toFixed(2)

            },0);
            // [900.00, 750.00, 635.00]
        },


<tr v-for="transaction in transactions">
  <td>{{ transaction.id }}</td>
  <td>{{ transaction.amount }}</td>
  <td>{{ remainingBalance[index] }}</td>
</tr>

remainingBalance:函数（）{
var tempBalance=this.balance
返回此.collection.map（函数（事务）{
tempBalance+=（交易金额）
返回解析浮点（tempBalance）.toFixed（2）
},0);
// [900.00, 750.00, 635.00]
},
{{transaction.id}
{{transaction.amount}}
{{remainingBalance[index]}