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


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 [
     ...

Select Dinámico

Hola buenas a todos estoy trabajando en un sistema en el cuál, en un formulario tengo un select para seleccionar datos de una tabla, y en la vista del formulario me funciona ya que me carga todos los datos que tengo almacenados en dicha tabla; pero cuando selecciono una de las opciones, sea cual séa la que seleccione, siempre se guarda el primer registro de la tabla... Es com...