Veamos como se captura cuando se presiona una tecla y cuando se la suelta. Para esto tenemos los eventos v-on:keypress que se dispara cuando el operador presiona una tecla y v-on:keyup cuando suelta la tecla.
Debemos definir que etiqueta HTML capturará el evento de presión de tecla.
Mostrar en una lista ordenada una serie de actividades a realizar. Asociar dichas actividades a un vector en el modelo.
Mediante un control de tipo input (text) permitir ingresar nuevas actividades y al presionar la tecla enter actualizar la lista ordenada con la nueva actividad.
<!doctype html>
<html>
<head>
<title>Prueba Vue</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div id="aplicacion">
<h1>Listado de actividades</h1>
<ol>
<li v-for="actividad in actividades">
{{actividad}}
</li>
</ol>
Nueva actividad:<input type="text" v-on:keyup.enter="actualizarLista" v-model="actividad" placeholder="Enter para confirmar">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app=new Vue({
el: '#aplicacion',
data:{
actividad: '',
actividades: []
},
methods: {
actualizarLista: function() {
this.actividades.push(this.actividad);
this.actividad = '';
}
}
})
</script>
</body>
</html>
En el modelo de datos hemos definido dos propiedades una llamada 'actividad':
actividad: '',
La propiedad 'actividad' la asociamos con el control input mediante la directiva v-model donde el operador carga por teclado la actividad:
Nueva actividad:<input type="text" v-on:keyup.enter="actualizarLista" v-model="actividad" placeholder="Enter para confirmar">
Como vemos en el control input definimos una segunda directiva v-on:keyup.enter que se ejecuta cuando el operador suelta una tecla y dicha tecla es la tecla enter (también podemos escribir v-on:keyup.13 que es el caracter asscii de dicha tecla)
Por otro lado tenemos en el modelo de datos un vector vacío donde se guardarán las actividades:
actividades: []
Cuando se presiona la tecla "Enter" se ejecuta el método "actualizarLista":
actualizarLista: function() {
this.actividades.push(this.actividad);
this.actividad = '';
}
Como podemos comprobar en este método solo agregamos al vector actividades mediante el método push de Javascript el texto que hay en el control input. Solo gracias a Vue se actualiza la lista ordenada de HTML con las actividades del arreglo:
<ol>
<li v-for="actividad in actividades">
{{actividad}}
</li>
</ol>
Es importante ver lo concisa que es nuestra aplicación que añade actividades a una lista utilizando el framework Vue.