Crear listado de tareas con VueJS

Primeros pasos

Lo primero que debemos hacer es instalar de manera global el cliente de Vue en nuestro equipo. Para ello vamos a ejecutar:

npm install -g @vue/cli
# or
yarn global add @vue/cli

Con el comando vue --version puedes comprobar si se instaló correctamente o no. Una vez confirmes que VueJS está instalado, vamos a generar el esqueleto de nuestra aplicación ejecutando el siguiente comando:

vue create vue-task

Ahora que ya hemos generado la estructura de nuestro proyecto, vamos a abrir la carpeta que se nos ha creado, en mi caso vue-task, en nuestro editor de código.

Edición de código

Vamos a crear una carpeta nueva llamada components y dentro de esta un fichero al que llamaremos task.vue, en el vamos a añadir el siguiente código:

<template>
    <div>
        <h1 class="display-4 text-center">Listado de Tareas</h1>
        <hr>
        <div class="row">
            <div class="col-lg-8 offset-lg-2">
                <div class="card mt-4">
                    <div class="card-body">
                        <div class="input-group">
                            <input type="text" v-model="task" class="form-control form-control-lg" placeholder="Agregar tarea">
                            <div class="input-group-append">
                                <button v-on:click="addTask()" class="btn btn-success btn-lg">Agregar</button>
                            </div>
                        </div>
                        <br>
                        <p v-if="listTask.length == 0">No hay tareas</p>
                        <ul class="list-group">
                            <li v-for="(task,index) of listTask" :key="index" class="list-group-item d-flex justify-content-between">
                                <span class="cursor" v-bind:class="{'text-success': task.completed}" v-on:click="completeTask(index, task)">
                                    <i v-bind:class="[task.completed ? 'far fa-check-circle' : 'far fa-circle']"></i>
                                </span>
                                <span v-bind:class="{'line-through': task.completed}">{{ task.name }}</span>
                                <span class="text-danger cursor" v-on:click="deleteTask(index)">
                                    <i class="fas fa-trash-alt"></i>
                                </span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Task',
        data() {
            return{
                task: '',
                listTask: []
            }
        },
        methods: {
            addTask() {
                const taskObj = {
                    name: this.task,
                    completed: false
                }

                this.listTask.push(taskObj);
                this.task = '';
            },
            deleteTask(index) {
                this.listTask.splice(index, 1);
            },
            completeTask(index, task) {
                this.listTask[index].completed = !task.completed;
            }
        }
    }
</script>

<style scoped>
    .cursor{
        cursor: pointer;
    }
    .line-through{
        text-decoration:line-through;
    }
</style>

Ahora vamos a aclarar el contenido del nuevo fichero y así entenderemos que hace cada línea de código:

• La etiqueta template contiene el HTML que se verá al cargar el componente y con lo que el usuario va a interactuar directamente.
• La etiqueta script contiene toda la lógica que hará que la vista HTML responda a lo que el usuario final espera. Dentro de la etiqueta script vemos que empieza con la declaración del componente y para ello se usa el export default {}. Su contenido se divide es los siguientes objetos JSON:
  • name: Es el nombre con el que declaramos el componente.
  • data(): Retorna los datos con los que se inicia el componente.
  • methods: Contiene la funcionalidad que va a tener nuestro componente. Funciones a las que podremos llamar al pulsar un botón, por ejemplo addTask es una función a la que llamaremos al pulsar el botón agregar. Para llamar a un método de VueJS debemos poner lo siguiente en la etiqueta button:

<button v-on:click="addTask()">Agregar</button> // addTask es el nombre del metodo definido en el methods

• Nuestro componente tiene los siguientes métodos/funciones:

  • addTask: Agrega una tarea/item nueva al objeto listTask con el nombre X.
  • deleteTask: Elimina una tarea/item del objeto listTask
  • completeTask: Cambia el estado de una tarea/item del objecto listTask editando el valor de completed a true.

• Por último tenemos la etiqueta style scoped que sirve para darle estilos a nuestro componente.

Ahora que ya tenemos el componente listo y funcionando, tenemos que colocarlo en la vista de nuestra web app.

Usar el componente nuevo

Para usar un componente en alguna vista debemos importar nuestro componente y declarar el componente, por ejemplo en nuestro fichero App.vue, que es el fichero principal de nuestra web app. Quedaría algo así:

// Importamos el fichero de nuestro componente
import Task from './components/Task'
export default {
    name: 'App',
    components: {
      Task // Añadimos el componente indicando su name
    }
}

Una vez hayamos hecho esto, ya solo tenemos que llamar a nuestro componente en el template de la webapp, por ejemplo en nuestro fichero App.vue dentro de las etiquetas template:

<template>
  <Task />
</template>

Tan solo con esto ya hemos creado un simple listado de tareas en VueJS. En el siguiente repositorio puedes encontrar el código del proyecto completo:

FuenRob / vue-task