Итак, у меня есть запрос, который извлекает выставленные счета и оплаченные, и я хочу создать таблицу с текущим балансом.
это мои текущие извлеченные данные
+--------------+------------+----------+
| 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, если есть выставленный счет, и наоборот. нет строки со значением как для выставленных счетов, так и для оплаченных.
я ищу либо со стороны Vuejs, либо со стороны laravel при извлечении данных
Вы можете добиться этого, перебирая массив транзакций и выполняя расчет данных 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>