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

Question

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

Navigation

#1 by (1 votes)

1

Good morning, gentlemen, I have the following array of objects:

[{
  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
}]

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

Here's how I'd like to base it with today's date 10/9/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 days running based on the fields in the calendar and the forecast date and add a new field in the object.

Note: I'm using vues and I'm trying 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 porcentagem field to all objects, like I can use or better to do this, I tried with a for (kkkk) and it did not work.

lista () {

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

  return this.cards;
}

(error during evaluation)

javascript vue.js

asked by anonymous 09.10.2017 / 14:44

1 answer

Images do not appear in the Mail inbox. Laravel 5.4 How do I bind an element that was inherited from a User Control?

score 1 · Accepted Answer

You can also use a method to do this.

In the template you would have:

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

and 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: link

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

To have this in computed mode and sorted by percentage you could do this:

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><divclass="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>