Inicio Blog Cursos Foro

Arrays en VueJS


author_post
José Luis Guisado

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>

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

array vuejs

¡No te pierdas nuevas entradas! Sí­guenos en nuestras redes sociales

Preguntas relacionadas

No hay preguntas sobre este artículo.

¿Tienes alguna duda sobre el artículo? ¡Pregunta!