Vuejs Display running balance

Question

So I have a request that fetch the Billed and Payed and i want to make a table with running balance

this is my current fetched data

+--------------+------------+----------+
| 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   |
+--------------+------------+----------+

I want to make a table like this, that displays running balance

    +--------------+------------+----------+----------+
    | 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   |
    +--------------+------------+----------+----------+

what have i tried right now is

 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>

but it only displays same the starting balance the value of Payed is always 0 if there is a billed and its vice versa. there is no row with value on both Billed and Payed.

im looking for either from Vuejs or laravel side when fetching the data

Answer 1

You can achieve this by iterating the transactions array and do the calculation on payed and billed data to update the balance. I just created a working demo for you. You can give a try :

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>