Eventos en VUE

En este video vamos a trabajar específicamente en los eventos de VUE, los cuales podrían ser básicamente un clic, presionar una tecla, cualquier acción, comunicación o interactividad que el usuario haga con la página web.

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

Para explicarte un poco mejor sobre los eventos en vue, te vamos a mostrar ejemplos sencillos utilizando otra directiva muy conocida llamada V-ON.

V-ON

Con esta directiva podemos escuchar *eventos DOM y ejecutar algunos JavaScript cuando son activados. Estos eventos podrían ser el click o el keyup (cuando el usuario por presiona un botón o escribe en una caja texto, soltar una tecla).

Código VUE

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.0/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#main',
	data: {
	    people: ['Lynda', 'Isabella', 'Abel', 'Diana'],
	        name: '',
	    },
	    methods: {
	        addName: function (){
		    this.people.unshift(this.name);
			this.people.push(this.name);
			this.name = '';
		    }
	    }
    });
</script>

En el código utilizado veremos varios cambios con respecto al ejemplo anterior.

  • Utilizaremos una variable people que almacenara un pequeño arreglo con nombres de personas y a los cuales accederemos para listarlos en la vista.
  • La variable name definida por defecto como vacía, será el enlace modelo a una caja texto de nuestro html.
  • Definimos un método addName que será llamado tras la activación de los eventos que correspondan por parte del usuario. La línea this.people.unshift(this.name); añadirá elementos al arreglo “people” en el inicio, en cambio this.people.push(this.name); los agregará al final de la lista. La última línea de código this.name = ''; no hará más que limpiar la caja de texto por medio del enlace modelo “name”.

Evento v-on:click

Para explicar la funcionalidad de este evento vamos a utilizar una caja de texto conectada por la directiva v-model a la variable name. Dentro de una etiqueta span añadimos un botón que por medio del evento v-on:click=”addName” hará el llamado al método definido como addName en el código vue.

<div class="input-group">
    <input type="text" class="form-control" v-model="name">
    <span class="input-group-btn">
        <input type="button" class="btn btn-default" value="add" v-on:click=”addName”>
    </span>
</div>

Entonces, cada vez que el usuario escriba algo en la caja de texto y de clic en el botón, el texto introducido se añadirá al final del arreglo.

Evento v-on:keyup

En la explicación de este evento solo necesitamos de una caja de texto conectada por la directiva v-model a la variable name y además como parámetro adicional le agregamos el evento v-on:keyup.enter=”addName” que se encargará de hacer un llamado al método addName del código vue mostrado anteriormente.

<div class="input-group">
    <input type="text" class="form-control" v-model="name" v-on:keyup.enter=”addName”>
</div>

Este ejemplo lo que hará es estar a la espera o en escucha de que el usuario escriba algo en la caja de texto y al presionar la tecla ENTER, el texto introducido se agregue a la lista de elementos con los que contamos en el arreglo “people” de vue.

Al evento v-on:keyup le podemos definir no solo la tecla .enter sino también algunas otras como .tab, .delete, .esc, etc. Podrás ver más sobre esto en el siguiente enlace a la documentación oficial de vue: clic aquí

Evento v-on:submit

Para configurar un formulario entero y que a su vez solo se haga únicamente un llamado a un método vue como lo es “addName”, necesitamos utilizar el siguiente evento v-on:submit.prevent="addName" esto hará que se ejecute tanto por la acción de presionar la tecla ENTER o hacer clic en el botón del formulario. Cabe señalar que la opción .prevent lo único que hará es controlar que el formulario no refresque la página.

<form v-on:submit.prevent="addName">
    <div class="input-group">
        <input type="text" class="form-control" v-model="name">
        <span class="input-group-btn">
            <input type="submit" class="btn btn-default" value="add">
	</span>
    </div>
</form>

Listo! Ya has aprendido un poco del dinamismo que nos pueden brindar los eventos en Vue, ahora es tu turno de seguir practicando y mejorando tus habilidades para tus proyectos.

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


Spatie/Laravel Permission ¿Cómo agregar campos en la tabla "roles"?

Hola, mi consulta es la siguiente:

Relacioné la tabla "roles" con mi tabla** "empresa**", es decir, en la tabla "roles", tengo el campo "id_empresa", en la vista, están los campos necesarios y el select de la empresa pero al querer guardar los datos, me arroja el siguiente error: ** "The given role or permission should use guard web instead of Empresas. "** No ...

SOFTWARE PARA CONSULTORIOS MEDICOS

Hola Amigos. soy nuevo en el grupo.. me gustaria saber si alguien tiene o tuvo algun proyecto basado en laravel, para consultorios medicos? ...

sincronización de componentes hermanos

un gran saludo a la comunidad rimorsorf... espero de su valiosa ayuda para mi problema que es el siguiente:

tengo dos componentes en el mismo nivel, el primero crea una tabla con una lista de procesos por tramitar y el segundo componente lista en una tabla los procesos que se han asignado para tramitar; cuando en la primera tabla se asigna el proceso este debe desaparecer de...

plantilla blade y vuejs2

buenas noches comunidad, por casualidad alguien sabrá si se puede integrar la plantilla de laravel blade en vuejs2 component??, gracias dee antemano...