Wie implementiert man Lauf Balance in vue.js Schleife?

Question

Ich habe eine Tabelle mit monetären Transaktionen und ich möchte ein laufendes Gleichgewicht der Arten zeigen.

Initial Balance: 1000.00 

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

In meinem js Datenarray, ich habe:

data: [ 

    balance: 1000.00, 

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

], 

Aus meiner Sicht habe ich:

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

Jedoch darf der Wert nicht den korrekten Wert anzeigt und ich get

[Vue warnen]: Sie können eine unendliche Update-Schleife für Watcher mit Expres haben sion "balance - = transaction.amount"

Irgendwelche Ideen, wie man das richtig umsetzt? Vielen Dank!

Answer 1

Der Grund dafür ist, dass jedes Mal, wenn balance aktualisiert wird, ein Lebenszyklusereignis verursacht wird und versucht wird, balance erneut festzulegen. Dies geschieht in der balance -= transaction.amount Ausdruck. Sie möchten eine berechnete Eigenschaft erstellen oder eine Methode zum Berechnen des verbleibenden Saldos erstellen.

Etwas wie folgt aus:

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

oder als Methode:

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

und dann in Ihrem v-for würden Sie ersetzen balance -= transaction.amount mit remainingBalance oder remainingBalance(balance, transactions) (je nachdem, ob Sie sich für eine berechnete verwenden Eigenschaft oder eine Methode)

Wenn Sie eine Erklärung zu wasbenötigen, lass es mich wissen.

Answer 2

Ich würde auch vorschlagen, eine berechnete Eigenschaft wie Taylor tat, aber einen anderen Ansatz: Berechnen Sie alle verbleibenden Guthaben in einem berechneten proerty als Array, und dann in der Vorlage die passende Wert erhalten jeweils für $index

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

Vorlage:

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