Un evento muy usado es cuando se presiona un control de tipo input (submit) que por defecto toma todos los datos del formulario y los envía a nuestro servidor web.
Veremos como podemos prevenir el envío y ejecutar algún algoritmo en Javascript mediante Vue.
Almacenar en un arreglo códigos de artículos, sus descripciones y precios. Mostrar en una tabla HTML los datos y mediante un formulario HTML permitir ingresar nuevos datos en el arreglo.
<!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">
<table border="1">
<tr><td>Código</td><td>Descripción</td><td>Precio</td></tr>
<template v-for="articulo in articulos">
<tr>
<td>{{articulo.codigo}}</td>
<td>{{articulo.descripcion}}</td>
<td>{{articulo.precio}}</td>
</tr>
</template>
</table>
<form v-on:submit.prevent="agregarArticulo">
<p>
Ingrese código:<input type="number" v-model="codigo">
</p>
<p>
Ingrese descripción:<input type="text" v-model="descripcion">
</p>
<p>
Ingrese precio:<input type="text" v-model="precio">
</p>
<p><input type="submit" value="Agregar"></p>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app=new Vue({
el: '#aplicacion',
data:{
codigo: '',
descripcion: '',
precio: '',
articulos: [{
codigo:1,
descripcion: 'papas',
precio: 34
}]
},
methods: {
agregarArticulo: function() {
this.articulos.push({
codigo: this.codigo,
descripcion: this.descripcion,
precio: this.precio
});
this.codigo = '';
this.descripcion = '';
this.precio = '';
}
}
})
</script>
</body>
</html>
| Código | Descripción | Precio |
| {{articulo.codigo}} | {{articulo.descripcion}} | {{articulo.precio}} |
La tabla HTML donde se muestran los datos aparece con una fila de datos debido a que el arreglo lo definimos con una componente:
articulos: [{
codigo:1,
descripcion: 'papas',
precio: 34
}]
Luego en la vista mediante la directiva v-for mostramos el contenido del arreglo:
<table border="1">
<tr><td>Código</td><td>Descripción</td><td>Precio</td></tr>
<template v-for="articulo in articulos">
<tr>
<td>{{articulo.codigo}}</td>
<td>{{articulo.descripcion}}</td>
<td>{{articulo.precio}}</td>
</tr>
</template>
</table>
Para prevenir que cuando se presione el botón de tipo submit se recargue la página debemos capturar el evento v-on:submit.prevent:
<form v-on:submit.prevent="agregarArticulo">
Con v-on:submit capturamos el evento pero no prevenimos que se envíen los datos al servidor y por lo tanto se recargue la página.
Para agregar un elemento a nuestro arreglo hemos llamado al método "agregarArticulo" cuyo algoritmo crea un objeto y lo añade al arreglo:
agregarArticulo: function() {
this.articulos.push({
codigo: this.codigo,
descripcion: this.descripcion,
precio: this.precio
});
this.codigo = '';
this.descripcion = '';
this.precio = '';
}
Además borramos el contenido de los tres controles de tipo input modificando las propiedades del modelo. Recordemos que tenemos una asociación bidireccional entre la vista y el modelo, cualquier cambio en el modelo de datos se actualiza inmediatamente en la vista como vemos que sucede al agregar elementos al vector o borrar los contenidos de codigo, descripcion y precio.