Ahora que ya sabemos generar nuestro proyecto vuejs y hacer uso de condicionales y funciones que hemos visto en nuestros anteriores artículos, vamos a aprender a tratar arrays en nuestra aplicación de Vue.js. Lo que haremos será una vista que muestre toda la información de nuestro array, que le iremos añadiendo mediante un formulario que crearemos en la misma.
Para comenzar, vamos a añadir el CDN de bootstrap a nuestro proyecto para darle un estilo y tenga una mejor presentación. Para ello, iremos a nuestro archivo index.html
Y nuestra estructura será la siguiente:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>proyecto</title>
<!--CSS DE CDN DE BOOTSTRAP-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
<!--JS DE CDN DE BOOTSTRAP-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Nos dirigimos a nuestro archivo app.vue, declararemos en la parte del script las variables,el array y la función que utilizaremos para añadir información:
<script>
export default {
name: 'app',
data () {
return {
arrayPersonas:[],//Array que recorreremos
nombre : "",//variable nombre que hacer referencia al valor del input
apellidos:""//variable apellidos que hacer referencia al valor del input
}
},
methods:{
Guardar(){
var persona = {nombre:this.nombre, apellidos:this.apellidos} //creamos la variable personas, con la variable nombre y apellidos
this.arrayPersonas.push(persona);//añadimos el la variable persona al array
//Limpiamos los campos
this.nombre = "";
this.apellidos = "";
},
}
}
</script>Y en el template, crearemos por una parte una tabla donde recorreremos el array y mostraremos su información, y por otra, un formulario para añadir datos a nuestro array:
<template>
<div class="container">
<div class="row">
<div class="col-md-6">
<h2 class="text-center">Lista de usuarios</h2>
<table class="table text-center">
<thead>
<tr>
<th>Nombre</th>
<th>Apellidos</th>
</tr>
</thead>
<tbody>
<tr v-for="persona in arrayPersonas" :key="persona.id"> <!-- Recorremos nuestro array -->
<td v-text="persona.nombre"></td> <!--En la primera columna mostramos el nombre-->
<td v-text="persona.apellidos"></td> <!--En la segunda mostramos el apellido-->
</tr>
</tbody>
</table>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Nombre</label>
<input v-model="nombre" type="text" class="form-control"> <!-- este input estará relacionado con la variable nombre-->
<label>Apellidos</label>
<input v-model="apellidos" type="text" class="form-control"><!-- este input estará relacionado con la variable apellidos-->
</div>
<button @click="Guardar()" class="btn btn-success">Añadir</button><!--Este botón llama a la función guardar que hemos declarado en la parte script-->
</div>
</div>
</div>
</template>Mediante el atributo v-model estamos relacionando los inputs con las variables que hemos declarado en el script.
De esta forma tendriamos un formulario que añadiría personas y mostraría el resultado en nuestra tabla de forma dinámica:
