DEV Community

loading...

Crear listado de tareas con VueJS

Roberto Morais
I am a web application software programmer, I love learning new things and sharing experiences and knowledge with others.
・3 min read

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • 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
    }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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:

Discussion (0)