Creación de registros a través de formularios con Vue.js 2

En está lección vamos a continuar con el desarrollo de nuestra pequeña aplicación CRUD con Vue.js 2. En esta ocasión vamos a trabajar en el feature para que los usuarios puedan agregar tareas al listado de tareas, así haremos nuestro listado verdaderamente dinámico, además aprovecharemos de repasar conceptos importantes como lo son el manejo de formularios con Vue, el manejo de eventos, la directiva v-on, v-model y más.

Notas

Para mejorar un poco el flujo de trabajo, en esta lección se usó el archivo app.js donde está todo el código de JavaScript y se hace referencia a dicho archivo desde index.html con <script src="app.js"></script>.

En nuestro formulario vamos a utilizar la directiva v-on (en su forma abreviada @) y el evento «submit» para llamar al método createTask cuando el usuario presione el botón para crear una tarea o la tecla ENTER dentro de la caja de texto. También pasamos .prevent para prevenir el comportamiento por defecto del formulario.

<form @submit.prevent="createTask" class="new-task-form">
    ...
</form>

Repasa el manejo de eventos con Vue.js 2.

En el método createTask añadimos la nueva tarea al listado con el uso de .push(). Al final nos aseguramos de que el campo new_task vuelva a estar en blanco.

createTask: function () {
    this.tasks.push({
        description: this.new_task,
        pending: true,
        editing: false
    });

    this.new_task = '';
}

El método push de JavaScript nos permite agregar nuevos items al final de un array.

Recordemos que es importante declarar en data todas las propiedades que vayamos a utilizar, así sea con una cadena vacía. Por este motivo debemos declarar new_task en data.