How to add a new position to the object based on other fields

Question

Good morning gentlemen, I have the following object array:

[{
  key:"-Kw05MQXBFh8uUxDml-v",
  datainicio:"2017-10-09",
  dataprevisao:"2017-10-13",
  descricao:"teste",
  etapa:"A testar",
  numero:"56789",
  qteDias: 4
},
{
  key:"-Kw05iv443JpB9EstNxs",
  datainicio:"2017-10-04",
  dataprevisao:"2017-10-11",
  descricao:"teste",
  etapa:"Em desenvolvimento",
  numero:"56874",
  qteDias: 7
}]

and would like to add one more position in the two objects, and would be the porcentagem calculating the forecast date for today, example I have 4 days to deliver a project and already passed two days then the percentage would be 50%..

here how I would like basing with today’s date 09/10/2017:

[{
  key:"-Kw05MQXBFh8uUxDml-v",
  datainicio:"2017-10-09",
  dataprevisao:"2017-10-13",
  descricao:"teste",
  etapa:"A testar",
  numero:"56789",
  qteDias: 4,
  porcentagem: 0.00
},
{
  key:"-Kw05iv443JpB9EstNxs",
  datainicio:"2017-10-04",
  dataprevisao:"2017-10-11",
  descricao:"teste",
  etapa:"Em desenvolvimento",
  numero:"56874",
  qteDias: 7,
  porcentagem: 71.00
}]

so basically I want to calculate the percentage of running days based on whether the start and date fields and add a new field to the object.

Note: I am using vuejs and I want to put this list in computed, the percentage calculation I’ve done and it works, but my problem is not knowing what to use to add the field porcentagem in all objects, like what I can use or best way to perform this operation, I tried with a for(kkkk) and did not work.

lista () {

  for(i = 0; i < this.cards.length; i++) {
    this.cards[i].porcentagem = 2
  }

  return this.cards;
}

(error during evaluation)

Answer 1

You can use a method to do that too.

In the template you would have:

<div v-for="obj in dados">{{percentagem(obj)}}</div>

and in the methods:

methods: {
    percentagem(obj) {
      const inicio = new Date(obj.datainicio);
      const fim = new Date(obj.dataprevisao);
      const hoje = new Date();
      const perc = (fim - hoje) * 100 / (fim - inicio);
      return perc.toFixed(2) + '%';
    }
}

jsFiddle: https://jsfiddle.net/Sergio_fiddle/uwzxb5rb/

Of course you can own a property computed for this. In this case it would be a mapping of the initial array joining the logic I put above as method.

To get it in gear computed and ordered by the percentage you could do so:

new Vue({
  el: '#vue-app',

  data: {
    dados: []
  },

  computed: {
    dadosOrdenados() {
      const dadosComPercentagem = this.dados.map(obj => {
        const inicio = new Date(obj.datainicio);
        const fim = new Date(obj.dataprevisao);
        const hoje = new Date();
        const perc = (fim - hoje) * 100 / (fim - inicio);
        obj.percentagem = perc;
        return obj;
      });
      return dadosComPercentagem.sort((a, b) => a.percentagem - b.percentagem);
    }
  },
  mounted() {
    this.dados = [{
      key: "-Kw05MQXBFh8uUxDml-v",
      datainicio: "2017-10-09",
      dataprevisao: "2017-10-13",
      descricao: "teste",
      etapa: "A testar",
      numero: "56789",
      qteDias: 4,
      porcentagem: 0.00
    }, {
      key: "-Kw05iv443JpB9EstNxs",
      datainicio: "2017-10-04",
      dataprevisao: "2017-10-11",
      descricao: "teste",
      etapa: "Em desenvolvimento",
      numero: "56874",
      qteDias: 7,
      porcentagem: 71.00
    }];
  }
});

<script src="https://vuejs.org/js/vue.min.js"></script>
<div class="container" id="vue-app">
  <div v-for="obj in dadosOrdenados">
    <h3>{{obj.descricao}}</h3>
    <p><span>Percentagem: </span> {{obj.percentagem.toFixed(2) + '%'}}</p>
  </div>
</div>