所以我有一個請求來獲取賬單和已付款，我想制作一個運行余額的表
這是我當前獲取的資料
-------------- ------------ ----------
| Date Created | Billed | Payed |
-------------- ------------ ----------
| 2022-01-01 | 1000 | 0 |
| 2022-01-02 | 0 | 100 |
| 2022-02-01 | 2000 | 0 |
| 2022-02-02 | 0 | 2000 |
| 2022-03-01 | 3000 | 0 |
| 2022-03-02 | 0 | 3000 |
-------------- ------------ ----------
我想制作一張這樣的表格，顯示運行余額
-------------- ------------ ---------- ----------
| Date Created | Billed | Payed | Balance |
-------------- ------------ ---------- ----------
| 2022-01-01 | 1000 | 0 | 1000 |
| 2022-01-02 | 0 | 100 | 900 |
| 2022-02-01 | 2000 | 0 | 2900 |
| 2022-02-02 | 0 | 2000 | 900 |
| 2022-03-01 | 3000 | 0 | 3900 |
| 2022-03-02 | 0 | 3500 | 400 |
-------------- ------------ ---------- ----------
我現在嘗試的是
remainingBalance: function () {
var tempBalance = this.balance
return this.collection.map(function(transaction) {
tempBalance = (transaction.billed)
return parseFloat( tempBalance).toFixed(2)
},0);
// [900.00, 750.00, 635.00]
},
<tr v-for="transaction in transactions">
<td>{{ transaction.id }}</td>
<td>{{ transaction.billed}}</td>
<td>{{ transaction.payed}}</td>
<td>{{ remainingBalance[index] }}</td>
</tr>
但它只顯示相同的起始余額，如果有賬單，Payed 的值始終為 0，反之亦然。Billed 和 Payed 都沒有值行。
我在獲取資料時從 Vuejs 或 laravel 端尋找
uj5u.com熱心網友回復：
您可以通過迭代 transactions 陣列并計算payed資料billed來更新balance. 我剛剛為您創建了一個作業演示。你可以試一試：
var vm = new Vue({
el: '#app',
data: {
transactions: [{
id: 1,
billed: 1000,
payed: 0
}, {
id: 2,
billed: 0,
payed: 100
}, {
id: 3,
billed: 2000,
payed: 0
}, {
id: 4,
billed: 0,
payed: 2000
}, {
id: 5,
billed: 3000,
payed: 0
}, {
id: 6,
billed: 0,
payed: 3500
}]
},
mounted() {
this.transactions = this.transactions.map((obj, index) => {
if (obj.id === 1) {
obj.balance = obj.billed - obj.payed
} else {
obj.balance = (!obj.billed && obj.payed)
? this.transactions[index - 1].balance - obj.payed
: obj.billed this.transactions[index - 1].balance
}
return obj;
})
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<div id="app">
<table class="table table-borderd table-striped">
<thead>
<th>ID</th>
<th>Billed</th>
<th>Payed</th>
<th>Balance</th>
</thead>
<tbody>
<tr v-for="transaction in transactions">
<td>{{ transaction.id }}</td>
<td>{{ transaction.billed }}</td>
<td>{{ transaction.payed }}</td>
<td>{{ transaction.balance }}</td>
</tr>
</tbody>
</table>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/475548.html