Vuejs Display running balance-CodePudding

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

CodePudding user response：

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