Ahora que ya sabemos generar nuestro proyecto vuejs 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>

Estructura de nuestro archivo Vue

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 tendríamos un formulario que añadiría personas y mostraría el resultado en nuestra tabla de forma dinámica: