Learning Vuejs 2

Second tutorial code for Learning Vue JS

by Sergio Crisostomo

HTML

<script src="https://vuejs.org/js/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.min.js"></script>
<div class="container" id="vue-app">
  <div v-for="obj in dados">{{percentagem(obj)}}</div>
</div>

CSS

li.completed {
  text-decoration: line-through;
}

.margin-right-10 {
  margin-right: 10px;
}

JavaScript

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

  data: {
    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
    }]
  },

  computed: {

  },

  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) + '%';
    }
  }
});