Directivas V-IF, V-ELSE - VUEjs

En este vídeo vamos aprender como agregar una tarea dinámicamente para realizar las acciones de marcar estas tareas como terminadas y desmarcarlas, todo esto mediante código Vue.

Inicia sesión para poder registrar las lecciones que has completado Login

Lo primero que debemos hacer es entender que cuando estamos hablando de la caja de texto, estamos hablando de datos al mismo tiempo y los datos deben manejarse dentro de la llave data del objeto Vue.

Entonces, para enlazar la caja de texto en la que escribiremos una nueva tarea le añadimos como atributo la directiva v-model="newKeep", mediante el nombre newKeep enlazamos la caja al código Vue a través de la clave data añadiéndole newKeep con un valor vacío.

En el diseño de la misma caja de texto le agregamos una segunda directiva v-on:keyup.enter="addKeep" esta servirá para que cuando el usuario escriba en la caja y presione la tecla enter se ejecute el método addkeep de Vue, que agregará esa nueva tarea.

<div class="col-xs-6">
    <h>Agregar una tarea</h1>
    <input type="text" class="form-control" v-on:keyup.enter="addKeep" v-model="newKeep">
</div>

Para crear el método addkeep nos dirigimos al archivo de nuestro código Vue script.js y dentro de la llave methods agregamos dicha función con la siguiente línea this.lists.push({ keep: this.newKeep, completed: false}) donde push significa “empujar o agregar” los datos de la caja de texto hacia el array lists, dentro creamos un objeto parecido a los ya definidos en el array pero con el valor del enlace newKeep que recordemos es el que contiene los datos ingresados en la caja de texto. Después de agregar la nueva tarea simplemente limpiamos el valor del enlace o caja de texto newKeep con la siguiente línea this.newKeep = ''.

<script>
methods: {
    addKeep: function() {
        this.lists.push({ keep: this.newKeep, completed: false});
        this.newKeep = '';
    }
}
</script>

Marcar y desmarcar Tareas

Para controlar estas acciones lo podemos realizar directamente en el elemento de la lista del archivo index.html. Agregamos la función @click="item.completed = ! item.completed" con la cual básicamente lo que hacemos es actualizar el valor del ítem.completed que en caso de tener el valor false, al hacer clic se colocará el valor contrario, que sería true y viceversa al realizar otro clic.

<li class="list-group-item"
    v-for="item in lists" 
    v-bind:class="item.completed == true ? 'disabled' : ''"
    @click="item.completed = ! item.completed">
        {{ item.keep }}
</li>

Cambiar Títulos

Para realizar el cambio de títulos tanto de la caja de texto como de la lista de una forma dinámica lo realizamos mediante una directiva condicional, es decir v-if="lists.length > 0" con la cual controlamos que se muestre el texto “Agregar una tarea” si el array lists de Vue tiene al menos un elemento o tarea. En cambio, con la directiva v-else="lists" controlamos que el texto sea “Crea una tarea” en caso de que el array lists se encuentre vacío o sin tareas.

Para cambiar el título del listado de tareas usamos exactamente las mismas condicionales, pero con diferentes textos a mostrar en cada condición. Con esto realizado el html resultante quedaría de la siguiente forma:

<div class="col-xs-6">
    <h1 v-if="lists.length > 0">Agregar una tarea</h1>
    <h1 v-else="lists">Crea una tarea</h1>
    <input type="text" class="form-control" v-on:keyup.enter="addKeep" v-model="newKeep">
</div>    
<div class="col-xs-6">
    <h1 v-if="lists.length > 0">Listado de tarea</h1>
    <h1 v-else="lists">No hay tareas registradas</h1>
    <ul class="list-group">
        <li class="list-group-item"
            v-for="item in lists" 
            v-bind:class="item.completed == true ? 'disabled' : ''"
            @click="item.completed = ! item.completed">
                {{ item.keep }}
        </li>
    </ul>
</div>

Para poder apreciar correctamente el funcionamiento de las condiciones establecidas, en el archivo script.js y dentro del array lists borramos los 3 objetos de tareas establecidas en los videos anteriores y agregamos nuevas tareas mediante la aplicación.

Con esto prácticamente hemos terminamos el desarrollo de este proyecto, para el siguiente video haremos un repaso de todo lo desarrollado a lo largo de este pequeño curso, te indicaremos otras cosas interesantes y no puede faltar su correspondiente despedida.

Adquiere en preventa y aprovecha un gran descuento TDD en Laravel

Comparte en

Creado por: Venezuela Italo Morales

Profesor de #Laravel y #PHP en Rimorsoft Online

Más información


Validación de registros duplicados en tabla intermedia

Hola,

Necesito de su ayuda estoy tratando que un request valide un registro para que no sea repetido, este esta compuesto por tres llaves foraneas(instituto_id, carrera_id, campus_id). les dejo el request: ```php return [ 'instituto_id' => 'required|numeric|min:1', 'carrera_id' => 'required|numeric|min:1', ...

El auth de laravel trabaja con $_SESSION?.

el auth de laravel trabaja basado en tokens o con el objeto session de php ...

Rutas de Laravel no funcionan

Buenas a todos, tengo un problema, ultimamente, cada vez que creo un nuevo proyecto de Laravel las rutas de este no funcionan. Por ejemplo: si creo el proyecto, éste se crea, pero al agregarle el sistema de autenticación: "auth" se generan tanto las rutas en el archivo web.php y las vistas. pero si intento acceder a la sección de registro o inicio de sesión me aparece el e...

form request ajax laravel (Mostrar error de validación de formulario con ajax)

Hola, tengo una consulta por hacer. Quisiera conocer sus opiniones, sobre como mostrar los errores de validación con ajax cuando utlizo la clase Form Request. Debo decir que el mensaje de registrado con éxito si lo muestra, sin embargo los mensajes de error no los he podido mostrar. Gracias

//FORM REQUEST


public function rules()
    {
        return [
     ...