Examples Vue Pug

examples-vue-pug.markdown

Examples Vue Pug

A Pen by Raul Guerra on CodePen.

License.

index.pug

#app
  .container
    .field.is-grouped(v-show="changingName")
      input.input(placeholder="Nombre" v-model="name")
      a.button(@click="toggleStatus") Cambiar
    i.title(v-show="!changingName") {{ name }}
      span.icon
      i.fa.fa-pencil.fa-fw(@click="toggleStatus")
    .field
      label.label Nombre:
      input.input(v-model="newTask.title")
    .field
      label.label Tiempo:
      input.input(v-model="newTask.time")
    .field.is-grouped
      .control
        a.button.is-primary(@click="addTask") Nueva tarea
      .control
        a.button.is-danger(@click="cancel") Cancelar

    p.subtitle(style="color:red" v-show="!this.tasks[0]") No hay tareas

    article.message(v-for="(t,i) in tasks")
      .message-header {{ t.title }}
        button.delete(@click="removeTask(i)")
      .message-body Tiempo: {{t.time}}

    p Tiempo total: {{ totalTime }}

script.js

new Vue({
  el: '#app',
  data () {
    return {
      name: 'Cristofer',
      tasks: [],
      newTask: {
          title: '',
          time: 0
      },
      changingName: false
    }
  },
  created: function () {
    this.tasks = JSON.parse(localStorage.getItem('tasks')) || [];
  },
  methods: {
    addTask: function () {
      this.tasks.push({
        title: this.newTask.title,
        time: this.newTask.time
      });
      localStorage.setItem('tasks', JSON.stringify(this.tasks));
    },
    removeTask: function (i) {
      this.tasks.splice(i,1);
      localStorage.setItem('tasks', JSON.stringify(this.tasks));
    },
    cancel: function () {
      this.newTask.title = '',
      this.newTask.time = 0
    },
    toggleStatus: function () {
      this.changingName = !this.changingName;
    }
  },
  computed:{
    totalTime: function () {
      if(!this.tasks[0]) return 0;

      let count = 0;
      for(let i=0;i<this.tasks.length;i++)
        count += parseInt(this.tasks[i].time);

      return count;
    }
  }
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css" rel="stylesheet" />