Question

我有一个包含货币交易的表格，我希望显示各种各样的运行余额。

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>

然而，该值并未显示正确的值，我得到了

[Vue警告]：对于具有表达式的观察者，您可能有一个无限的更新循环＆＃34; balance - = transaction.amount＆＃34;

任何想法如何正确实现？谢谢！

Answer 1

我还建议像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>

Answer 2

发生这种情况的原因是因为每次更新balance时，都会导致生命周期事件并尝试再次设置balance。这发生在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中，您将balance -= transaction.amount替换为remainingBalance或remainingBalance(balance, transactions)（取决于您是否选择分别使用计算属性或方法）< / p>

如果您需要解释Array.prototype.reduce的内容，请与我们联系。

Answer 3

需要对原始答案进行更多修改才能正常工作。我们还必须定义索引

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>

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

3 个答案: