Table with consecutive and accumulator in Vue

Question

Table with consecutive and accumulator in Vue

Navigation

#1 by (1 votes)

1

In this table programmed in VUE 2 I want this result:

+-------------------------------------------+
| fact    $importe  $ acumula  consecutivo  |
+-------------------------------------------+
| 23       $ 350     $ 350           1      |
| 28       $ 200     $ 550           2      |
| 32       $ 300     $ 850           3      |
+-------------------------------------------+

this is my current code:

<tr v-for="movi in movimientos">
 <td>{{movi.factura}}</td>
 <td>{{movi.importe}}{{acumular(movi.importe)}}</td>
 <td> {{saldo}} </td>
</tr>

How do I get the cumulative and the consecutive vue?

mounted(){
        this.entrar();
    },
    data(){
        return{
            movimientos: null,
            saldo: 0
        }
        },
    methods:{
       entrar(){
            axios.get('miservidor/lee.php?idc='+this.id)
                 .then((respues) => {
                    this.movimientos = respues.data;
            });
       },
       acumular(importe){
           this.saldo = this.saldo + importe;
       }
    }

javascript vue.js tablas

asked by GGUV 27.12.2018 в 02:46

source

1 answer

persistence in LocalStorage (fixes) Close activities Android studio

score 1 · Accepted Answer

I will make some assumptions about your data, but this idea can work for you:

Template

<table>
  <tr>
    <th>factura</th>
    <th>importe</th>
    <th>acumula</th> 
    <th>consecutivo</th>
  </tr>
  <tr v-for="(mov, indice) in newMovimientos">
    <td>{{mov.factura}}</td>
    <td>{{mov.importe}}</td>
    <td>{{mov.acum}}</td>
    <td>{{indice + 1}}</td>
  </tr>
</table>

Script

  data: {
    // asumo que así se ven tus datos por el ejemplo que muestras
    movimientos: [
    {factura: 23, importe: 350},
    {factura: 28, importe: 200},
    {factura: 32, importe: 300}
    ]
  },

  computed: {
     newMovimientos() {
       const newArray = this.movimientos.map(a => ({...a})) // crea una copia de movimientos
       let acum = 0
       newArray.forEach(p => {
         acum += p.importe
         p.acum = acum // agrego esta propiedad para guardar el acumulado
       })
       return newArray
     }
  }

The idea is that you create a copy of the movimientos array, and in this copy you add a acum property where the amounts are accumulated.

This array is mounted in a computed property called newMovimientos , and this is what you will iterate in v-for .