Manipulación del DOM con Vue.js: Práctica y Ejercicios

Cursos Empresas Blog Live Conf Precios

Contenido del curso

Introducción

CLI y Dev Tools

Manipulación del DOM

REST y HTTP

Sistema de Componentes

Vue Router

Extendiendo VueJS

Clases, Animaciones y Transiciones36

38
Animaciones CSS3 con transiciones en Vue
06:54 min

Vuex

Nuxt.js

Deploy a Producción con Now

Conclusiones

50
Cómo hacer deploy de tu app Vue.js
00:49 min

Bonus

Tomar examen

¿Qué tipo de material es este?

Hola, espero que hasta aquí estés disfrutando el curso, recuerda que para dominar un lenguaje o framework de programación debes practicar. Justamente por esto he creado este material para ti, puedes hacerlo en tu entorno local o puedes hacerlo en alguna herramienta como codepen.io. La idea es que practiques lo que has aprendido hasta este punto del curso, te invito a que revises el código de tus compañeros y que te animes a dar feedback así todos podrán ir creciendo.

Manipulación del DOM con Vue.js

Este ejercicio consiste en practicar la funcionalidad de renderizado declarativo que provee Vue.js, para eso vamos a crear una pequeña aplicación web que nos permita hacer seguimiento de tareas utilizando el local storage del Browser. Así vamos a reforzar los conceptos básicos que nos ofrece Vue.js para manipular e interactuar con el DOM.

Ejercicio:

Crear dentro de data una propiedad "name" de tipo String y una propiedad "tasks" de tipo de Array.
Agregar una expresión para mostrar el valor de name y utilizar la directiva apropiada para para mostrar en una lista cada uno de los elementos dentro de task. Cada "task" es un objeto con una propiedad "title" y otra "time". Agreguemos las expresiones necesarias para que en cada tarea podamos visualizar ambas propiedades.
Agregar funcionalidad para crear una nueva tarea:
- Vamos a necesitar una nueva propiedad llamada "newTask" que sea un Object. Dentro de este objeto también agregamos una propiedad "tilte" de tipo String y una propiedad "time" de tipo Number. Recuerda inicializar las propiedades con valores default.
- Vamos a crear un método llamado "addTask" que agregue una nueva tarea al array "tasks". Una vez agregada también va a reiniciar los valores dentro de "newTaks". Ten en cuenta que antes de agregar la propiedad debemos chequear con los valores de "newTask.title" y "newTask.time" existan (sean distintos de "falsy"). Por otro lado es importante que cada elemento nuevo que agreguemos al array de "tasks" sea un objeto nuevo y no la instancia de "newTask".
- Vamos a agregar el HTML, para esto necesitamos dos "inputs" y un "button". También debemos agregar las directivas correspondientes para enlazar el código con la vista.
- Creamos también una funcionalidad para cancelar, para eso debemos crear un método llamado "cancel" que simplemente reinicie los valores de las propiedades de newTask. Recordemos agregar un button de HTML donde enlazar este nuevo método.
- Es momento de saber cuantas horas llevamos trabajadas, para eso vamos a crear una computed property llamada "totalTime" donde se recorran todas las tareas y se calculo el total del tiempo trabajado. También vamos agregar un elemento HTML con la expresión necesaria para visualizar la propiedad.
- Debemos integrar la app con el local storage del browser. Dentro del metodo "addTask", guardamos toda la lista de tareas en dicho storage usando este metodo: "localStorage.setItem('tasks', JSON.stringify(this.tasks))".
- Guardando las tareas en el browser podemos persistir la información aunque estemos cerrando o refrescando la página. Además, al momento de crearse el componente, debemos leer esta información para poder cargar la lista de tareas. Para eso dentro del hook "created", escribimos el siguiente código: "this.tasks = JSON.parse(localStorage.getItem('tasks')) || []"
- Lo último que nos queda es poder eliminar las tareas que ya no queremos. Para eso vamos a crear un método que se llame "removeTask". Este método debe recibir por parámetro el indice de la tarea y podemos utilizar ese indice (en conjunto con el método "splice" de Array) para eliminar el elemento. Recordemos que tendremos que agregar un botón por cada tarea y cada uno de estos se encarga de llamar al método "removeTask" enviando por parámetro el indice correspondiente. Recordemos invocar la funcionalidad que ya pusimos en "addTask", para actualizar el local storage del Browser.
- Por último vamos a mejorar la UI, cuando no haya tareas podemos mostrar un mensaje que indica que no hay ninguna tarea cargada y por otro lado ocultar el lista vacía.

Si en algún punto del ejercicio te sientes perdido, te dejo la versión que yo hice para que puedas consultarla en cualquier momento: https://codepen.io/ianaya89/pen/NgEeVO

Manipulación del DOM con Vue.js: Práctica y Ejercicios

Comentarios

Diego Andres Cardenas Caro

student

Mi solución del ejercicios.

Yesica Lizeth Cortés Pineda

teacher

Esta muy cool te quedo muy bonito 😃, te felicito! ahora me gustaría mucho saber cómo fue tu experiencia con éste proyecto, cuéntanos que problemas encontraste en el proceso y cómo lograste resolverlos. También te animo a que veas la solución de tus compañeros y les dejes feedback así todos podemos aprender y crecer.

Diego Andres Cardenas Caro

student

Gracias @yesikita, me gusta mucho la metodologia de este curso, los ejercicios de cada tema son un verdadero plus. Para resolver el ejercicio, me sirvió mucho las soluciones de los compañeros y un poco de: Read-Search-Ask.

juan david vargas cante

student

Comparto mi Ejercicio hice deploy con Now, se que no tiene buen estilo aunque usé bootstrap xD, pero es funcional. Aquí el repositorio

Nacho Anaya

teacher

Muy bueno 👏👏👏

Yesica Lizeth Cortés Pineda

teacher

@juanvc123 Si tiene buen estilo 😄 ademas resolviste todo lo que propuso el profe, ya tenias alguna experiencia antes con otros frameworks? que te ha parecido Vue.js?

Carlos David Marciglia Gomez

student

Les comparto el proyecto realizado:

DEMO:

Codigo en GitHub:

Yesica Lizeth Cortés Pineda

teacher

Hola @cmarsiglia, me gusta mucho lo que hiciste en este proyecto, que tal la experiencia? has aprendido mucho? que dudas tienes?, ya viste las soluciones de tus compañeros?, seria buenísimo que les dejes un aporte, quizá alguna mejora que harías en su código o solo diles lo bueno que esta su proyecto.

Carlos David Marciglia Gomez

student

Gracias @yesikita, excelente la experiencia, la verdad he ampliado mis conocimientos con cada una de las clases vistas hasta el momento, cada concepto aprendido lo aplico a mi proyecto personal.

Cristofer Fuentes Barra

student

Aqui tengo el mio, le agregue la función para actualizar el nombre 😃

Nacho Anaya

teacher

👏👏👏

Ricardo Celis

teacher

Excelente Cristofer!

Alberto Fragoso

student

Les comparto mis solución ya integrada con Bulma.

Nacho Anaya

teacher

Muy bueno 👏

Yesica Lizeth Cortés Pineda

teacher

Hola!! Te quedó muy bien 😊, solo que tu sitio siempre me llama Alberto Fragoso 😦, crees que podrías hacer que ese nombre pueda cambiar poniendo un campo de texto para ingresarlo?. También recuerda ver las soluciones de tus compañeros y dejarles feedback así pueden mejorar sus proyectos y todos aprendemos mas!

Wilfredo Torres

student

Mi versión

Código

Buena practica!

Romedis Mauricio Meriño De La Cruz

student

Hola a todos, realicé el ejercicio con unas cuantas funciones extras de crud. --> Screenshot:

TaskManager.vue

/* eslint-disable vue/html-self-closing */
<template lang="pug">
  #app
    .container
        .section.p-0
            div.mb-6
                <div :class="messageClass" v-if="message">
                    <button class="delete"  aria-label="delete"  @click="message=false"></button>
                    | {{messageText}}
                </div>
            p.title.is-large.is-info.mt-6.mb-0
                | Task Manager
            p.has-text-right
                button.button.is-small.is-primary(@click="modalClass='modal is-active'; clear()")
                   | <i class="fa fa-plus" aria-hidden="true"></i> <strong> New task</strong>
                button.button.is-small.is-danger.ml-4(@click="deleteSelected")
                   | <i class="fa fa-trash" aria-hidden="true"></i> <strong class="ml-2"> Delete selected tasks</strong>
        table.table.is-bordered.is-hoverable.mt-2.is-fullwidth(v-show="tasks.length > 0")
          thead
            tr
              th
                input(type="checkbox" v-model="selectedAll")
              th Name
              th Description
              th Time
              th Ops.
          tbody
            tr(v-for="(task, index) in tasks")
              td
                input(type="checkbox" v-model="selected" :value="index")
              td {{task.name}}
              td {{task.description}}
              td {{task.time}} hrs
              td
                a.button.is-danger.is-small.mr-2(@click="deleteTask(index)") <i class="fa fa-times" aria-hidden="true"></i>
                a.button.is-info.is-small(@click="editTask(task, index)") <i class="fa fa-edit" aria-hidden="true"></i>
          tfoot
            tr
              td.has-text-right(colspan="3")
                strong Total Time
              td.has-text-left(colspan="2")
                | {{getTotalTime}} hrs
        div(v-if="!tasks.length")
            p.message.is-info.p-4.mt-4
                strong No hay tareas aún
    div
        <div :class="modalClass">
            <div class="modal-background"></div>
                <div class="modal-content">
                    div.my-4
                        <div :class="messageClass" v-if="messageInDialog">
                            <button class="delete"  aria-label="delete"  @click="messageInDialog=false"></button>
                            | {{messageText}}
                        </div>

                    .card.p-5
                        .card-header.title.has-text-right
                            span(v-if="editTaskIndex == -1") Create a new task
                            span(v-else) Edit task
                        .card-content
                            .content
                                .field
                                    input.input(type="text" v-model="aTask.name" placeholder="Task name")
                                .field
                                    textarea.textarea(v-model="aTask.description" placeholder="Task Description")
                                .field.has-text-left
                                    input.input(type="number" v-model="aTask.time" placeholder="Time" style="width:120px")
                                .field(v-if="editTaskIndex == -1")
                                    a.button.is-primary.is-medium(@click="addTask") Save task
                                    a.button.is-secondary.is-medium.ml-3(@click="modalClass='modal'") Close
                                .field(v-else)
                                    a.button.is-primary.is-medium(@click="updateTask") Update task
                </div>
            <button class="modal-close is-large" @click="modalClass='modal'" aria-label="close"></button>
        </div>

</template>
<script>

export default {

  name: "Tasks",
  data () {
    return {
      selected: [],
      editTaskIndex: -1,
      messageText: "The task was successfully saved.",
      messageClass: "notification is-success",
      message: false,
      messageInDialog: false,
      aTask: {
        name: "",
        time: 0,
        description: ""
      },
      totalTime: 0,
      modalClass: "modal",
      tasks: []
    };
  },
  computed: {
    getTotalTime (key = "time") {
      return this.tasks.reduce((a, b) => +a + +b.time, 0);
    },
    selectedAll: {
      set (val) {
        this.selected = [];
        if (val) {
          for (let i = 0; i < this.tasks.length; i++) {
            this.selected.push(i);
          }
        }
      },
      get () {
        return this.selected.length === this.tasks.length;
      }
    }
  },
  watch: {
  },
  created () {
    this.tasks = JSON.parse(localStorage.getItem("tasks")) || [];
  },
  mounted () {
    console.log("App Mounted");
  },
  methods: {
    deleteSelected () {
      const sel = this.selected.length;
      if (sel <= 0) {
        this.showMessage("notification is-warning", true, "You haven't selected any task to be deleted");
        return;
      }
      if (sel > 0) {
        for (let i = 0; i <= (sel); i++) {
          // Delete selected items
          this.tasks.splice(i, sel);
        }
        localStorage.setItem("tasks", JSON.stringify(this.tasks));
        this.showMessage("notification is-info", true, sel + " task(s) deleted successfully");
        this.selected = [];
      }
    },
    updateTask () {
      if (this.aTask.name.length > 0 && !isNaN(this.aTask.time)) {
        this.tasks[this.editTaskIndex] = { name: this.aTask.name, time: this.aTask.time, description: this.aTask.description };
        localStorage.setItem("tasks", JSON.stringify(this.tasks));
        this.showMessage("notification is-success", true, "The task '" + this.tasks[this.editTaskIndex].name + "' was edited");
        this.editTaskIndex = -1;
        this.modalClass = "modal";
        setTimeout(() => {
          this.message = false;
        }, 3000);
      } else {
        this.showMessage("notification is-danger", true, "Please review you information", true);
      }
    },
    editTask (task, index) {
      this.modalClass = "modal is-active";
      this.aTask = task;
      this.editTaskIndex = index;
    },
    showMessage (messageClass = "notification is-info", show = true, messageText, inDialog = false) {
      this.messageText = messageText;
      this.messageClass = messageClass;
      if (inDialog) {
        this.messageInDialog = true;
      } else {
        this.message = show;
      }
      setTimeout(() => {
        !inDialog ? this.message = false : this.messageInDialog = false;
      }, 3000);
    },
    deleteTask (index) {
      const taskName = this.tasks[index].name;
      this.tasks.splice(index, 1);
      localStorage.setItem("tasks", JSON.stringify(this.tasks));
      this.showMessage("notification is-info", true, `The task ${taskName} was deleted`);
    },
    clear () {
      this.aTask.name = "";
      this.aTask.time = 0;
      this.aTask.description = "";
      this.editTaskIndex = -1;
    },
    addTask () {
      if (this.aTask.name.length > 0 && !isNaN(this.aTask.time)) {
        if (this.aTask.time > 0) {
          const newTask = { name: this.aTask.name, time: this.aTask.time, description: this.aTask.description };
          this.tasks.push(newTask);
          localStorage.setItem("tasks", JSON.stringify(this.tasks));
          this.modalClass = "modal";
          this.showMessage("notification is-success", true, "The task was successfully saved");
          this.clear();
        } else {
          this.showMessage("notification is-danger", true, "Data for time must be a positive number", true);
        }
      } else {
        this.showMessage("notification is-danger", true, "Please review you information", true);
        // this.modalClass = "modal";
        setTimeout(() => {
          this.message = false;
        }, 3000);
      }
    }
  }
};
</script>

main.scss

@import '../../node_modules/bulma/bulma.sass';

David Higuera

student

Reutilizando el ejercicio del Curso básico de Vue y agregando las funcionalidades de este ejercicio:

CodePen Link

Paolo Joaquin Pinto Perez

student

Reto Completado!! Código:

Miguel Angel Reyes Moreno

student

Dejo mi código:

<template>
  <div id="app">
    <div class="tareas">
      <input type="text" name="" id="taskTitle" placeholder="Tarea">
      <input type="number" name="" id="taskTime" placeholder="Horas" min="1" step="1">
      <button @click="addTask">Agregar tarea</button>
    </div>
    <section v-if="tasks.length > 0">
      <div class="listaTareas">
        <ul>
          <li
            v-for="task, index in tasks"
            :key="index"
          >
            {{ task.title }} -> {{ task.time }} horas
          <button
            :key="index"
            @click="deleteTask"
          >
            Borrar tarea {{ task.title }}
          </button>
          </li>
        </ul>
      </div>

      <div class="tiempo">
        <p>Tiempo total: {{ totalTime }} horas</p>
      </div>
    </section>
    <section v-else>
      <h2>No hay tareas por el momento</h2>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tasks: [],
      newTask: {
        title: '',
        time: 0
      }
    };
  },

  methods: {
    addTask() {
      const title = document.getElementById('taskTitle').value;
      const time = parseInt(document.getElementById('taskTime').value);
      if (title !== '' && time !== '') {
        this.newTask.title = title;
        this.newTask.time = time;
        this.tasks.push(this.newTask);
        this.newTask = {
          title: '',
          time: 0
        };
      } else {
        alert('La tarea y el tiempo deben tener un valor');
      }

      localStorage.setItem('tasks', JSON.stringify(this.tasks));
    },

    deleteTask(task) {
      const index = this.tasks.indexOf(task);
      this.tasks.splice(index, 1);
      localStorage.setItem('tasks', JSON.stringify(this.tasks));
    }
  },

  computed: {
    totalTime() {
      let total = 0;
      this.tasks.forEach(task => {
        total += parseInt(task.time);
      });
      return total;
    }
  },

  created() {
    const tasks = localStorage.getItem('tasks');
    if (tasks) {
      this.tasks = JSON.parse(tasks) || [];
    }
  }
};
</script>

<style lang="scss">

</style>

Iván Gabriel Guerra

student

Comparto mi resolucion:

Nacho Anaya

teacher

Muy bueno Ivan, me gusto mucho el uso de reduce para resolver la computed. Te recomiendo usar const en aquellas variables que sabes que no mutaran su valor. Esta excelente!

Iván Gabriel Guerra

student

Gracias Ignacio, buen consejo! Excelente curso hasta ahora. Muy buena la idea de ir resolviendo desafios al final de cada leccion, que ponga en practica lo aprendido, y sobre todo que no sea algo muy basico, sino que requiera un poco de esfuerzo el resolverlo.

Fernando David Soto Betin

student

Excelente ejercicio para la manipulación del DOM, Sirve mucho para adquirir destreza en VUE.

GitHub Pages:

Repositorio:

Ricardo Celis

teacher

Justo esa es la intención Fersot, que bueno que te hayan gustado =)

Jesús Miguel Quinto Teran

student

Solución: https://codepen.io/jesuskinto/pen/BejGpr

Edwar Cedeño

student

Este es mi prototipo 100% funcional ademas le añadí un plus con las actividades completada y una barra de progreso para saber como vamos.

Edwar Cedeño

student

Por cierto aquí esta el repositorio. Click aquí

Angel Enrique Barrios

student

HTML

<template lang="pug">
  #app
    .columns
      .column
      .column
        h1 Tareas y horas
        br
        input.input.is-8(type="text" v-model="title" name="title" placeholder="title" )
        input.input.is-8(type="text" v-model="time" name="time" placeholder="time" ) 
        input.button.link(type="submit" name="submit" @click="addTask(title,time)")
        p(v-if="totalTime!==0") {{totalTime}}
        div(v-for="(task,i) in tasks")
          ul
            li {{task.title}} - {{task.time}}   
            button.delete.is-medium(@click="removeTask(i)")
            br
      .column
</template>

<script>
export default {
  name: 'app',
  
  data () {
    return {
      title:'',
      time:0,
      tasks:[]
    }
  },

  computed:{
    totalTime () {
      let total = 0
      this.tasks.map(function(sum){
        total += sum.time
      })
      return total
    }
  },
  created(){
    this.tasks = JSON.parse(localStorage.getItem('tasks')) || []
  },
  methods:{
    addTask (title, time) {
      if(title, time){
        const newTask ={
          title,
          time : parseInt(time)        
        }
        this.tasks.push(newTask);
      }else(
        alert('debe llenar todos los campos')
      )
      localStorage.setItem('tasks',JSON.stringify(this.tasks))
      this.cancel ()
    },
    cancel () {
      this.title = '',
      this.time = ''
    },
    removeTask (i) {
      let remove = this.tasks.splice(i,1);
      localStorage.setItem('tasks',JSON.stringify(this.tasks))
      return remove
    } 
  }
}
</script>

ANDRES FELIPE GOMEZ DIAZ

student

Mi frontend no es muy bueno, pero aquí va, sigo usando bulma, no me gustó que no tiene clases como tan practicas en comparación de bootstrap para listas y hay que desarrollar mas del lado del css, pero bueno, la funcionalidad está.

<template lang="pug">
  #app
    section.section
      nav.nav.has-shadow
        .container
          .field
            label.label Título de la tarea
              .control
                input.input.is-large(type="text", 
                                      placeholder="Título de la tarea" 
                                      v-model="title")
          .field
            label.label Tiempo de trabajo
              .control
                input.input.is-large(type="text", 
                                      placeholder="Tiempo trabajado" 
                                      v-model="time")
          .field.is-grouped.is-grouped-right
            .control
              a.button.is-info.is-large(@click="addTask") Agregar Tarea
              a.button.is-danger.is-large(@click="deleteTask") &times; Eliminar Lista completa
          br
          br
          h2 {{ timeWork }}
          p 
            small {{ numberTask }}
          
      .container
        .ul
          .li(v-for="(t, index) in tasks") {{ t.title }} - {{ t.time }}
            a.button.is-danger(@click="deleteThisTask(index)") &times;
        p.error 
          small {{ mensajeError }}

</template>

<script>
const tasks = []
export default {
  name: 'app',
  created(){
    this.tasks = JSON.parse(localStorage.getItem(tasks)) || []
  },
  data () {
    return {
      title: '',
      time: '',
      tasks: [],
      mensajeError: '',
      indexList: ''
    }
  },
  computed:{
    numberTask(){
      return `Tareas Pendientes: ${this.tasks.length}`
    },
    timeWork(){
      let horasTrabajadas = 0
      for(let item of this.tasks){
        horasTrabajadas += Number(item.time)
      }
      return `Hasta el momento hemos trabajado ${horasTrabajadas} hrs.`
    }
  },
  methods:{
    addTask(){
      if(this.title === '' || this.time === ''){
        this.mensajeError = 'Debe indicar los dos elementos título y horario'
      }else{
        if (!/^([0-9])*$/.test(this.time)){
          this.mensajeError = 'El tiempo debe ser un número'
        }else{
          this.tasks.push({title: this.title, time: this.time})
          this.title = ''
          this.time = ''
          this.mensajeError = ''
          localStorage.setItem(tasks, JSON.stringify(this.tasks))
        }
      }
    },
    deleteTask(){
      this.tasks = []
      localStorage.setItem(tasks, JSON.stringify(this.tasks))
    },
    deleteThisTask(index){
      this.tasks.splice(index, 1)
      localStorage.setItem(tasks, JSON.stringify(this.tasks))
    }
  }
}
</script>

<style lang="scss">
  @import './scss/main.scss';
  .results {
    margin-top: 15px;
  }
  .error {
    color: red;
    font-weight: bolder;
  }
  .button {
    margin-right: 10px;
  }
</style>

Francisco Hernandez

student

Repo :

DEMO :

Tarde pero seguro…

Nacxit Armando Mayorga Espinal

student

Originalmente lo hice con html porque no me gusta pug pero lo converti a pug para ustedes

.conteiner
  nav.nav.justify-content-center.p-3.mb-2.bg-info.text-white
    a.nav-link.text-dark(href='#') Home
  .conteiner
    | {{ name }}
  .conteiner
    .col-12
      .d-flex.justify-content-center
        .form-group
          label(for='') Name
          input.form-control(type='text' placeholder='Add Name' v-model='title')
          small.form-text.text-muted Add the new Title Name
        .d-flex.justify-content-center
          .form-group
            label(for='') Time
            input.form-control(type='text' placeholder='Add time' v-model='time')
            small.form-text.text-muted Add the new time Name
          button.btn.btn-primary(type='button' v-on:click='addTask()' data-toggle='modal' data-target='#exampleModal')
            | Add
          button.btn.btn-danger(type='button' v-on:click='restartTask()' data-toggle='modal' data-target='#exampleModal')
            | cancel
  table.table
    thead
      tr
        th Title
        th Time
    tbody
      tr(v-for='(item, index) in task' :key='item')
        td(scope='row') {{ item.title }}
        td(scope='row') {{ item.time }}
        td(scope='row')
          button.btn.btn-danger(type='button' v-on:click='remove(index)' data-toggle='modal' data-target='#exampleModal')
            | &times;
    p.text-success.totalTime {{ totalTime }}
  #exampleModal.modal.fade(v-if='showMessage' tabindex='-1' role='dialog' aria-labelledby='exampleModalLabel' aria-hidden='true')
    .modal-dialog(role='document')
      .modal-content
        .modal-header
          h5.modal-title Modal title
          button.close(type='button' data-dismiss='modal' aria-label='Close')
            span(aria-hidden='true') &times;
        .modal-body
          p {{ message }}```

Jose Jorge Martinez Suarez

student

<template>
  <v-container>
    <h2>Administrador de Tareas</h2>
    <h4>{{ name }}</h4>
    <v-form style="max-width: 30vw" class="mb-4">
      <v-container>
        <v-row>
          <v-col lg="12">
            <v-text-field label="Titulo" required v-model="newTask.title">
            </v-text-field>
          </v-col>
          <v-col lg="12">
            <v-text-field
              type="number"
              value="0"
              required
              v-model="newTask.time"
            >
            </v-text-field>
          </v-col>
          <v-btn color="info" class="mr-4" @click="addTask"> Guardar </v-btn>
          <v-btn color="error" @click="clearTask"> Cancelar </v-btn>
        </v-row>
      </v-container>
    </v-form>
    <h4>Lista de Tareas</h4>
    <p v-if="tasks.length === 0">Aun no hay tareas cargadas.</p>
    <ol v-else>
      <li v-for="(task, index) in tasks" :key="index">
        {{ task.title }} - {{ task.time }}
        <span @click="removeTask(index)">❌</span>
      </li>
      <p class="mt-4">
        Tiempo Trabajado: <span>{{ totalTime }}</span>
      </p>
    </ol>
  </v-container>
</template>

<script>
export default {
  name: "TaskList",
  data() {
    return {
      name: "José Jorge",
      tasks: [],
      newTask: {
        title: "",
        time: 0,
      },
    };
  },
  created() {
    this.tasks = JSON.parse(localStorage.getItem("tasks")) || [];
  },
  computed: {
    totalTime() {
      let sum = 0;
      this.tasks.forEach((item) => {
        sum += parseInt(item.time);
      });
      return sum;
    },
  },
  methods: {
    clearTask() {
      this.newTask.title = "";
      this.newTask.time = 0;
    },
    addTask() {
      if (this.newTask.title !== "" && this.newTask.time !== 0) {
        this.tasks.push({ title: this.newTask.title, time: this.newTask.time });
        localStorage.setItem("tasks", JSON.stringify(this.tasks));
        this.clearTask();
      }
    },
    removeTask(indice) {
      this.tasks.splice(indice);
      localStorage.setItem("tasks", JSON.stringify(this.tasks));
    },
  },
};
</script>

```\<template>  \<v-container>    \<h2>Administrador de Tareas\</h2>    \<h4>{{ name }}\</h4>    \<v-form style="max-width: 30vw" class="mb-4">      \<v-container>        \<v-row>          \<v-col lg="12">            \<v-text-field label="Titulo" required v-model="newTask.title">            \</v-text-field>          \</v-col>          \<v-col lg="12">            \<v-text-field              type="number"              value="0"              required              v-model="newTask.time"            >            \</v-text-field>          \</v-col>          \<v-btn color="info" class="mr-4" @click="addTask"> Guardar \</v-btn>          \<v-btn color="error" @click="clearTask"> Cancelar \</v-btn>        \</v-row>      \</v-container>    \</v-form>    \<h4>Lista de Tareas\</h4>    \<p v-if="tasks.length === 0">Aun no hay tareas cargadas.\</p>    \<ol v-else>      \<li v-for="(task, index) in tasks" :key="index">        {{ task.title }} - {{ task.time }}        \<span @click="removeTask(index)">❌\</span>      \</li>      \<p class="mt-4">        Tiempo Trabajado: \<span>{{ totalTime }}\</span>      \</p>    \</ol>  \</v-container>\</template>
\<script>export default {  name: "TaskList",  data() {    return {      name: "José Jorge",      tasks: \[],      newTask: {        title: "",        time: 0,      },    };  },  created() {    this.tasks = JSON.parse(localStorage.getItem("tasks")) || \[];  },  computed: {    totalTime() {      let sum = 0;      this.tasks.forEach((item) => {        sum += parseInt(item.time);      });      return sum;    },  },  methods: {    clearTask() {      this.newTask.title = "";      this.newTask.time = 0;    },    addTask() {      if (this.newTask.title !== "" && this.newTask.time !== 0) {        this.tasks.push({ title: this.newTask.title, time: this.newTask.time });        localStorage.setItem("tasks", JSON.stringify(this.tasks));        this.clearTask();      }    },    removeTask(indice) {      this.tasks.splice(indice);      localStorage.setItem("tasks", JSON.stringify(this.tasks));    },  },};\</script>

Jose Jorge Martinez Suarez

student

Hola les comparto un screenshot del reto.

/* eslint-disable vue/html-self-closing */
<template lang="pug">
  #app
    .container
        .section.p-0
            div.mb-6
                <div :class="messageClass" v-if="message">
                    <button class="delete"  aria-label="delete"  @click="message=false"></button>
                    | {{messageText}}
                </div>
            p.title.is-large.is-info.mt-6.mb-0
                | Task Manager
            p.has-text-right
                button.button.is-small.is-primary(@click="modalClass='modal is-active'; clear()")
                   | <i class="fa fa-plus" aria-hidden="true"></i> <strong> New task</strong>
                button.button.is-small.is-danger.ml-4(@click="deleteSelected")
                   | <i class="fa fa-trash" aria-hidden="true"></i> <strong class="ml-2"> Delete selected tasks</strong>
        table.table.is-bordered.is-hoverable.mt-2.is-fullwidth(v-show="tasks.length > 0")
          thead
            tr
              th
                input(type="checkbox" v-model="selectedAll")
              th Name
              th Description
              th Time
              th Ops.
          tbody
            tr(v-for="(task, index) in tasks")
              td
                input(type="checkbox" v-model="selected" :value="index")
              td {{task.name}}
              td {{task.description}}
              td {{task.time}} hrs
              td
                a.button.is-danger.is-small.mr-2(@click="deleteTask(index)") <i class="fa fa-times" aria-hidden="true"></i>
                a.button.is-info.is-small(@click="editTask(task, index)") <i class="fa fa-edit" aria-hidden="true"></i>
          tfoot
            tr
              td.has-text-right(colspan="3")
                strong Total Time
              td.has-text-left(colspan="2")
                | {{getTotalTime}} hrs
        div(v-if="!tasks.length")
            p.message.is-info.p-4.mt-4
                strong No hay tareas aún
    div
        <div :class="modalClass">
            <div class="modal-background"></div>
                <div class="modal-content">
                    div.my-4
                        <div :class="messageClass" v-if="messageInDialog">
                            <button class="delete"  aria-label="delete"  @click="messageInDialog=false"></button>
                            | {{messageText}}
                        </div>

                    .card.p-5
                        .card-header.title.has-text-right
                            span(v-if="editTaskIndex == -1") Create a new task
                            span(v-else) Edit task
                        .card-content
                            .content
                                .field
                                    input.input(type="text" v-model="aTask.name" placeholder="Task name")
                                .field
                                    textarea.textarea(v-model="aTask.description" placeholder="Task Description")
                                .field.has-text-left
                                    input.input(type="number" v-model="aTask.time" placeholder="Time" style="width:120px")
                                .field(v-if="editTaskIndex == -1")
                                    a.button.is-primary.is-medium(@click="addTask") Save task
                                    a.button.is-secondary.is-medium.ml-3(@click="modalClass='modal'") Close
                                .field(v-else)
                                    a.button.is-primary.is-medium(@click="updateTask") Update task
                </div>
            <button class="modal-close is-large" @click="modalClass='modal'" aria-label="close"></button>
        </div>

</template>
<script>

export default {

  name: "Tasks",
  data () {
    return {
      selected: [],
      editTaskIndex: -1,
      messageText: "The task was successfully saved.",
      messageClass: "notification is-success",
      message: false,
      messageInDialog: false,
      aTask: {
        name: "",
        time: 0,
        description: ""
      },
      totalTime: 0,
      modalClass: "modal",
      tasks: []
    };
  },
  computed: {
    getTotalTime (key = "time") {
      return this.tasks.reduce((a, b) => +a + +b.time, 0);
    },
    selectedAll: {
      set (val) {
        this.selected = [];
        if (val) {
          for (let i = 0; i < this.tasks.length; i++) {
            this.selected.push(i);
          }
        }
      },
      get () {
        return this.selected.length === this.tasks.length;
      }
    }
  },
  watch: {
  },
  created () {
    this.tasks = JSON.parse(localStorage.getItem("tasks")) || [];
  },
  mounted () {
    console.log("App Mounted");
  },
  methods: {
    deleteSelected () {
      const sel = this.selected.length;
      if (sel <= 0) {
        this.showMessage("notification is-warning", true, "You haven't selected any task to be deleted");
        return;
      }
      if (sel > 0) {
        for (let i = 0; i <= (sel); i++) {
          // Delete selected items
          this.tasks.splice(i, sel);
        }
        localStorage.setItem("tasks", JSON.stringify(this.tasks));
        this.showMessage("notification is-info", true, sel + " task(s) deleted successfully");
        this.selected = [];
      }
    },
    updateTask () {
      if (this.aTask.name.length > 0 && !isNaN(this.aTask.time)) {
        this.tasks[this.editTaskIndex] = { name: this.aTask.name, time: this.aTask.time, description: this.aTask.description };
        localStorage.setItem("tasks", JSON.stringify(this.tasks));
        this.showMessage("notification is-success", true, "The task '" + this.tasks[this.editTaskIndex].name + "' was edited");
        this.editTaskIndex = -1;
        this.modalClass = "modal";
        setTimeout(() => {
          this.message = false;
        }, 3000);
      } else {
        this.showMessage("notification is-danger", true, "Please review you information", true);
      }
    },
    editTask (task, index) {
      this.modalClass = "modal is-active";
      this.aTask = task;
      this.editTaskIndex = index;
    },
    showMessage (messageClass = "notification is-info", show = true, messageText, inDialog = false) {
      this.messageText = messageText;
      this.messageClass = messageClass;
      if (inDialog) {
        this.messageInDialog = true;
      } else {
        this.message = show;
      }
      setTimeout(() => {
        !inDialog ? this.message = false : this.messageInDialog = false;
      }, 3000);
    },
    deleteTask (index) {
      const taskName = this.tasks[index].name;
      this.tasks.splice(index, 1);
      localStorage.setItem("tasks", JSON.stringify(this.tasks));
      this.showMessage("notification is-info", true, `The task ${taskName} was deleted`);
    },
    clear () {
      this.aTask.name = "";
      this.aTask.time = 0;
      this.aTask.description = "";
      this.editTaskIndex = -1;
    },
    addTask () {
      if (this.aTask.name.length > 0 && !isNaN(this.aTask.time)) {
        if (this.aTask.time > 0) {
          const newTask = { name: this.aTask.name, time: this.aTask.time, description: this.aTask.description };
          this.tasks.push(newTask);
          localStorage.setItem("tasks", JSON.stringify(this.tasks));
          this.modalClass = "modal";
          this.showMessage("notification is-success", true, "The task was successfully saved");
          this.clear();
        } else {
          this.showMessage("notification is-danger", true, "Data for time must be a positive number", true);
        }
      } else {
        this.showMessage("notification is-danger", true, "Please review you information", true);
        // this.modalClass = "modal";
        setTimeout(() => {
          this.message = false;
        }, 3000);
      }
    }
  }
};
</script>

<template>
  <div id="app">
    <div class="tareas">
      <input type="text" name="" id="taskTitle" placeholder="Tarea">
      <input type="number" name="" id="taskTime" placeholder="Horas" min="1" step="1">
      <button @click="addTask">Agregar tarea</button>
    </div>
    <section v-if="tasks.length > 0">
      <div class="listaTareas">
        <ul>
          <li
            v-for="task, index in tasks"
            :key="index"
          >
            {{ task.title }} -> {{ task.time }} horas
          <button
            :key="index"
            @click="deleteTask"
          >
            Borrar tarea {{ task.title }}
          </button>
          </li>
        </ul>
      </div>

      <div class="tiempo">
        <p>Tiempo total: {{ totalTime }} horas</p>
      </div>
    </section>
    <section v-else>
      <h2>No hay tareas por el momento</h2>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tasks: [],
      newTask: {
        title: '',
        time: 0
      }
    };
  },

  methods: {
    addTask() {
      const title = document.getElementById('taskTitle').value;
      const time = parseInt(document.getElementById('taskTime').value);
      if (title !== '' && time !== '') {
        this.newTask.title = title;
        this.newTask.time = time;
        this.tasks.push(this.newTask);
        this.newTask = {
          title: '',
          time: 0
        };
      } else {
        alert('La tarea y el tiempo deben tener un valor');
      }

      localStorage.setItem('tasks', JSON.stringify(this.tasks));
    },

    deleteTask(task) {
      const index = this.tasks.indexOf(task);
      this.tasks.splice(index, 1);
      localStorage.setItem('tasks', JSON.stringify(this.tasks));
    }
  },

  computed: {
    totalTime() {
      let total = 0;
      this.tasks.forEach(task => {
        total += parseInt(task.time);
      });
      return total;
    }
  },

  created() {
    const tasks = localStorage.getItem('tasks');
    if (tasks) {
      this.tasks = JSON.parse(tasks) || [];
    }
  }
};
</script>

<style lang="scss">

</style>

<template lang="pug">
  #app
    .columns
      .column
      .column
        h1 Tareas y horas
        br
        input.input.is-8(type="text" v-model="title" name="title" placeholder="title" )
        input.input.is-8(type="text" v-model="time" name="time" placeholder="time" ) 
        input.button.link(type="submit" name="submit" @click="addTask(title,time)")
        p(v-if="totalTime!==0") {{totalTime}}
        div(v-for="(task,i) in tasks")
          ul
            li {{task.title}} - {{task.time}}   
            button.delete.is-medium(@click="removeTask(i)")
            br
      .column
</template>

<script>
export default {
  name: 'app',
  
  data () {
    return {
      title:'',
      time:0,
      tasks:[]
    }
  },

  computed:{
    totalTime () {
      let total = 0
      this.tasks.map(function(sum){
        total += sum.time
      })
      return total
    }
  },
  created(){
    this.tasks = JSON.parse(localStorage.getItem('tasks')) || []
  },
  methods:{
    addTask (title, time) {
      if(title, time){
        const newTask ={
          title,
          time : parseInt(time)        
        }
        this.tasks.push(newTask);
      }else(
        alert('debe llenar todos los campos')
      )
      localStorage.setItem('tasks',JSON.stringify(this.tasks))
      this.cancel ()
    },
    cancel () {
      this.title = '',
      this.time = ''
    },
    removeTask (i) {
      let remove = this.tasks.splice(i,1);
      localStorage.setItem('tasks',JSON.stringify(this.tasks))
      return remove
    } 
  }
}
</script>

<template lang="pug">
  #app
    section.section
      nav.nav.has-shadow
        .container
          .field
            label.label Título de la tarea
              .control
                input.input.is-large(type="text", 
                                      placeholder="Título de la tarea" 
                                      v-model="title")
          .field
            label.label Tiempo de trabajo
              .control
                input.input.is-large(type="text", 
                                      placeholder="Tiempo trabajado" 
                                      v-model="time")
          .field.is-grouped.is-grouped-right
            .control
              a.button.is-info.is-large(@click="addTask") Agregar Tarea
              a.button.is-danger.is-large(@click="deleteTask") &times; Eliminar Lista completa
          br
          br
          h2 {{ timeWork }}
          p 
            small {{ numberTask }}
          
      .container
        .ul
          .li(v-for="(t, index) in tasks") {{ t.title }} - {{ t.time }}
            a.button.is-danger(@click="deleteThisTask(index)") &times;
        p.error 
          small {{ mensajeError }}

</template>

<script>
const tasks = []
export default {
  name: 'app',
  created(){
    this.tasks = JSON.parse(localStorage.getItem(tasks)) || []
  },
  data () {
    return {
      title: '',
      time: '',
      tasks: [],
      mensajeError: '',
      indexList: ''
    }
  },
  computed:{
    numberTask(){
      return `Tareas Pendientes: ${this.tasks.length}`
    },
    timeWork(){
      let horasTrabajadas = 0
      for(let item of this.tasks){
        horasTrabajadas += Number(item.time)
      }
      return `Hasta el momento hemos trabajado ${horasTrabajadas} hrs.`
    }
  },
  methods:{
    addTask(){
      if(this.title === '' || this.time === ''){
        this.mensajeError = 'Debe indicar los dos elementos título y horario'
      }else{
        if (!/^([0-9])*$/.test(this.time)){
          this.mensajeError = 'El tiempo debe ser un número'
        }else{
          this.tasks.push({title: this.title, time: this.time})
          this.title = ''
          this.time = ''
          this.mensajeError = ''
          localStorage.setItem(tasks, JSON.stringify(this.tasks))
        }
      }
    },
    deleteTask(){
      this.tasks = []
      localStorage.setItem(tasks, JSON.stringify(this.tasks))
    },
    deleteThisTask(index){
      this.tasks.splice(index, 1)
      localStorage.setItem(tasks, JSON.stringify(this.tasks))
    }
  }
}
</script>

<style lang="scss">
  @import './scss/main.scss';
  .results {
    margin-top: 15px;
  }
  .error {
    color: red;
    font-weight: bolder;
  }
  .button {
    margin-right: 10px;
  }
</style>

.conteiner
  nav.nav.justify-content-center.p-3.mb-2.bg-info.text-white
    a.nav-link.text-dark(href='#') Home
  .conteiner
    | {{ name }}
  .conteiner
    .col-12
      .d-flex.justify-content-center
        .form-group
          label(for='') Name
          input.form-control(type='text' placeholder='Add Name' v-model='title')
          small.form-text.text-muted Add the new Title Name
        .d-flex.justify-content-center
          .form-group
            label(for='') Time
            input.form-control(type='text' placeholder='Add time' v-model='time')
            small.form-text.text-muted Add the new time Name
          button.btn.btn-primary(type='button' v-on:click='addTask()' data-toggle='modal' data-target='#exampleModal')
            | Add
          button.btn.btn-danger(type='button' v-on:click='restartTask()' data-toggle='modal' data-target='#exampleModal')
            | cancel
  table.table
    thead
      tr
        th Title
        th Time
    tbody
      tr(v-for='(item, index) in task' :key='item')
        td(scope='row') {{ item.title }}
        td(scope='row') {{ item.time }}
        td(scope='row')
          button.btn.btn-danger(type='button' v-on:click='remove(index)' data-toggle='modal' data-target='#exampleModal')
            | &times;
    p.text-success.totalTime {{ totalTime }}
  #exampleModal.modal.fade(v-if='showMessage' tabindex='-1' role='dialog' aria-labelledby='exampleModalLabel' aria-hidden='true')
    .modal-dialog(role='document')
      .modal-content
        .modal-header
          h5.modal-title Modal title
          button.close(type='button' data-dismiss='modal' aria-label='Close')
            span(aria-hidden='true') &times;
        .modal-body
          p {{ message }}```

<template>
  <v-container>
    <h2>Administrador de Tareas</h2>
    <h4>{{ name }}</h4>
    <v-form style="max-width: 30vw" class="mb-4">
      <v-container>
        <v-row>
          <v-col lg="12">
            <v-text-field label="Titulo" required v-model="newTask.title">
            </v-text-field>
          </v-col>
          <v-col lg="12">
            <v-text-field
              type="number"
              value="0"
              required
              v-model="newTask.time"
            >
            </v-text-field>
          </v-col>
          <v-btn color="info" class="mr-4" @click="addTask"> Guardar </v-btn>
          <v-btn color="error" @click="clearTask"> Cancelar </v-btn>
        </v-row>
      </v-container>
    </v-form>
    <h4>Lista de Tareas</h4>
    <p v-if="tasks.length === 0">Aun no hay tareas cargadas.</p>
    <ol v-else>
      <li v-for="(task, index) in tasks" :key="index">
        {{ task.title }} - {{ task.time }}
        <span @click="removeTask(index)">❌</span>
      </li>
      <p class="mt-4">
        Tiempo Trabajado: <span>{{ totalTime }}</span>
      </p>
    </ol>
  </v-container>
</template>

<script>
export default {
  name: "TaskList",
  data() {
    return {
      name: "José Jorge",
      tasks: [],
      newTask: {
        title: "",
        time: 0,
      },
    };
  },
  created() {
    this.tasks = JSON.parse(localStorage.getItem("tasks")) || [];
  },
  computed: {
    totalTime() {
      let sum = 0;
      this.tasks.forEach((item) => {
        sum += parseInt(item.time);
      });
      return sum;
    },
  },
  methods: {
    clearTask() {
      this.newTask.title = "";
      this.newTask.time = 0;
    },
    addTask() {
      if (this.newTask.title !== "" && this.newTask.time !== 0) {
        this.tasks.push({ title: this.newTask.title, time: this.newTask.time });
        localStorage.setItem("tasks", JSON.stringify(this.tasks));
        this.clearTask();
      }
    },
    removeTask(indice) {
      this.tasks.splice(indice);
      localStorage.setItem("tasks", JSON.stringify(this.tasks));
    },
  },
};
</script>

```\<template>  \<v-container>    \<h2>Administrador de Tareas\</h2>    \<h4>{{ name }}\</h4>    \<v-form style="max-width: 30vw" class="mb-4">      \<v-container>        \<v-row>          \<v-col lg="12">            \<v-text-field label="Titulo" required v-model="newTask.title">            \</v-text-field>          \</v-col>          \<v-col lg="12">            \<v-text-field              type="number"              value="0"              required              v-model="newTask.time"            >            \</v-text-field>          \</v-col>          \<v-btn color="info" class="mr-4" @click="addTask"> Guardar \</v-btn>          \<v-btn color="error" @click="clearTask"> Cancelar \</v-btn>        \</v-row>      \</v-container>    \</v-form>    \<h4>Lista de Tareas\</h4>    \<p v-if="tasks.length === 0">Aun no hay tareas cargadas.\</p>    \<ol v-else>      \<li v-for="(task, index) in tasks" :key="index">        {{ task.title }} - {{ task.time }}        \<span @click="removeTask(index)">❌\</span>      \</li>      \<p class="mt-4">        Tiempo Trabajado: \<span>{{ totalTime }}\</span>      \</p>    \</ol>  \</v-container>\</template>
\<script>export default {  name: "TaskList",  data() {    return {      name: "José Jorge",      tasks: \[],      newTask: {        title: "",        time: 0,      },    };  },  created() {    this.tasks = JSON.parse(localStorage.getItem("tasks")) || \[];  },  computed: {    totalTime() {      let sum = 0;      this.tasks.forEach((item) => {        sum += parseInt(item.time);      });      return sum;    },  },  methods: {    clearTask() {      this.newTask.title = "";      this.newTask.time = 0;    },    addTask() {      if (this.newTask.title !== "" && this.newTask.time !== 0) {        this.tasks.push({ title: this.newTask.title, time: this.newTask.time });        localStorage.setItem("tasks", JSON.stringify(this.tasks));        this.clearTask();      }    },    removeTask(indice) {      this.tasks.splice(indice);      localStorage.setItem("tasks", JSON.stringify(this.tasks));    },  },};\</script>

Introducción

Aplicaciones profesionales con Vue.js

Vue como framework progresivo y reactivo

CLI y Dev Tools

Instalación de Vue.js: Node, Dev Tools y CLI

Crear una aplicación Vue con CLI y webpack

Cómo funciona webpack.config.js

Babel: transpilador de JavaScript moderno

ESLint con Standard JS: linteo automático en webpack

Configuración de Sass y Bulma en Vue

Cómo configurar Pug en Vue con webpack

Diseño de Mockups: Práctica y Colaboración en Comunidad

Creación de Vistas con Mockups y Vue.js

Manipulación del DOM

Expresiones en Vue: sintaxis doble llave

Diferencia entre v-show y v-if en el DOM

Qué es data binding en Vue.js

Computed properties en Vue.js: cómo crearlas

Qué son los watchers de Vue

Eventos Vue: directiva v-on y métodos format

Cómo construir una interfaz de búsqueda completa en Vue

Manipulación del DOM con Vue.js: Práctica y Ejercicios

REST y HTTP

Creando servicios HTTP con Fetch API

Configurar Trae con Fetch para peticiones HTTP

Cómo conectar servicios a componentes Vue

Sistema de Componentes

Cómo crear componentes en Vue

Componentes Layout en Vue con Bulma

Reactividad en Vue: $set y Object.assign

Hooks del ciclo de vida en Vue.js

Comunicación padre-hijo con props en Vue

Eventos en Vue: comunicar hijo a padre

Slots: HTML dinámico en componentes Vue

Plugin Event Bus: comunicar componentes sin relación en Vue

Vue Router

Vue Router para single page applications

Instalación de View Router paso a paso

<target-language> Spanish </target-language> Navegación programática con Vue Router

Extendiendo VueJS

Vue modifiers: cómo simplificar eventos

Filtros en Vue: conversión milisegundos a minutos

Directivas personalizadas en Vue: v-blur

Mixins Vue: compartir lógica entre componentes

Clases, Animaciones y Transiciones36

Animaciones CSS3 con transiciones en Vue

Vuex

Cómo Vuex centraliza estados en Vue

Instalación de Vuex con estado único

Cómo usar mutations y commit en Vuex

Getters de Vuex: mapGetters y store sincronizado

Cómo dispatch ejecuta actions asincrónicas en ViewX

Instalación de Viewex en Platzi Music

Nuxt.js

Server Side Rendering: ventajas y limitaciones

Instalación y configuración de Next.js en View

Copiar componentes Vue.js a Nuxt con SSR

Deploy a Producción con Now

Instalación y login de Now para Vue.js

Deploy de aplicación React con Now

Conclusiones

Cómo hacer deploy de tu app Vue.js

Bonus

Internacionalización con Vue I18n: configurar multiidioma

Configuración de unit tests en Vue con webpack

JWT con Vue Router: autenticación completa