Renderizar tabla con Vue usando directiva v-for
En este post te mostraré cómo repetir cosas en la vista de una app con Vue.JS usando v-for.
v-for permite iterar arreglos, objetos y también hacer ciclos.
Veremos cómo usar v-for, además de proporcionar la clave con :key y finalmente tomar el índice y el valor por separado.
Nota: a través de los ejemplos usaré Bootstrap 4 para un mejor diseño, aunque esto no va a interferir con el tema principal de v-for y Vue.
La sintaxis de v-for en Vue.js es:
v-for="elemento in coleccion"
Si se quiere obtener el índice se puede con:
v-for="(elemento, indice) in coleccion"
Y en caso de repetir cierta cantidad de veces:
v-for="numero in 5" (bueno, en este caso se repetiría 5 veces)
La directiva se coloca dentro de una etiqueta HTML que se quiere repetir. Vamos a ver un ejemplo sencillo con una lista:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Uso de v-for en Vue.js</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
</head>
<body>
<main role="main" class="container">
<div class="row">
<div class="col-12" id="app">
<h1>Uso de v-for en Vue.js</h1>
<a href="//parzibyte.me/blog">By Parzibyte</a>
<ul>
<li v-for="mascota in mascotas">{{mascota}}</li>
</ul>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">
</script>
<script src="script.js">
</script>
</body>
</html>Comenzamos declarando nuestro contenedor de app en la línea 17.
En la línea 21 tenemos a v-for, que va a repetir la variable (disponible solo en la vista) llamada mascota en los elementos que haya en mascotas.
Dentro de la lista (elemento li) accedemos a la variable y la mostramos.
El JavaScript para esto es el siguiente:
new Vue({
el: "#app",
data: () => ({
mascotas: ["Maggie", "Panqué", "Guayaba", "Meca"],
})
});Simplemente declaramos el arreglo mascotas en data.
Nota: si el arreglo está vacío, no se genera ningún error.
Además de un arreglo, también se pueden repetir los valores de un objeto o diccionario de JavaScript.
Por ejemplo. Tenemos la siguiente definición:
new Vue({
el: "#app",
data: () => ({
calificaciones: {
"Luis": 10,
"Fernando": 5,
"Rodrigo": 7,
},
})
});En la línea 4 estamos declarando un objeto que tiene nombres de alumnos como clave, y la calificación de cada uno como valor.
En el HTML hacemos lo siguiente:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Uso de v-for en Vue.js</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
</head>
<body>
<main role="main" class="container">
<div class="row">
<div class="col-12" id="app">
<h1>Uso de v-for en Vue.js</h1>
<a href="//parzibyte.me/blog">By Parzibyte</a>
<ul>
<li v-for="calificacion in calificaciones">{{calificacion}}</li>
</ul>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">
</script>
<script src="script.js">
</script>
</body>
</html>Es la misma sintaxis. Si ahora ejecutamos la app veremos que se renderiza una lista con calificaciones.
Si quisiéramos mostrar el nombre, es decir, la clave, tendríamos que recorrer con dos variables como veremos a continuación.
Para obtener la clave y el valor del objeto al usar v-for simplemente hay que declarar ambas variables. Cambiando el v-for así:
<ul>
<li v-for="(calificacion, nombre) in calificaciones">{{nombre}} => {{calificacion}}</li>
</ul>Lo que daría la siguiente salida en donde se imprime tanto la clave como el valor:
Lo mismo que aplicamos al recorrer el diccionario podemos aplicarlo cuando recorremos un arreglo.
En este caso tomaríamos el índice numérico y el valor del arreglo.
Nota: vamos a ver cómo recorrer un arreglo de objetos, así vemos también cómo es posible acceder al objeto dentro del v-for.
Veamos el siguiente ejemplo. Comenzamos por el script:
new Vue({
el: "#app",
data: () => ({
canciones: [
{
nombre: "Can I play with madness",
artista: "Iron Maiden"
},
{
nombre: "Stranger in town",
artista: "Toto"
},
{
nombre: "Shattered",
artista: "The Rolling Stones"
},
{
nombre: "Space Oddity",
artista: "David Bowie"
},
{
nombre: "Peppermint Twist",
artista: "Sweet"
},
],
})
});Tenemos un arreglo normal, que tiene objetos en su interior con las propiedades nombre y artista.
Para recorrerlo hacemos esto:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Uso de v-for en Vue.js</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
</head>
<body>
<main role="main" class="container">
<div class="row">
<div class="col-12" id="app">
<h1>Uso de v-for en Vue.js</h1>
<a href="//parzibyte.me/blog">By Parzibyte</a>
<ul>
<li v-for="(cancion, indice) in canciones">
<strong>Índice {{indice}}</strong> |
{{cancion.artista}} - {{cancion.nombre}}
</li>
</ul>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">
</script>
<script src="script.js">
</script>
</body>
</html>Ahora tenemos el índice, y el objeto de la canción.
Para dibujarla simplemente accedemos a cada propiedad a través del punto.
Lo anterior también puede ser dibujado dentro de una tabla, pues v-for se encarga de repetir los elementos sin importar el tipo.
Veamos el ejemplo. Lo único que cambia es la vista, pues los datos se quedan intactos.
La vista queda así:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Uso de v-for en Vue.js</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
</head>
<body>
<main role="main" class="container">
<div class="row">
<div class="col-12" id="app">
<h1>Uso de v-for en Vue.js</h1>
<a href="//parzibyte.me/blog">By Parzibyte</a>
<table class="table">
<thead>
<tr>
<th>Índice</th>
<th>Canción</th>
<th>Artista</th>
</tr>
</thead>
<tbody>
<tr v-for="(cancion, indice) in canciones">
<td>{{indice}}</td>
<td>{{cancion.nombre}}</td>
<td>{{cancion.artista}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">
</script>
<script src="script.js">
</script>
</body>
</html>Lo único que hacemos es repetir el tr (la fila de la tabla) en la línea 29.
El resultado es el siguiente:
En algunas ocasiones, y sobre todo cuando queremos que los cambios se reflejen si modificamos el arreglo u objeto, es necesario proporcionar al elemento una clave.
Esta clave debe ser única, y debe ser un tipo de dato primitivo.
En el caso de las canciones la clave podría ser el índice, pues no se repite. La misma es especificada con :key
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Uso de v-for en Vue.js</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
</head>
<body>
<main role="main" class="container">
<div class="row">
<div class="col-12" id="app">
<h1>Uso de v-for en Vue.js</h1>
<a href="//parzibyte.me/blog">By Parzibyte</a>
<table class="table">
<thead>
<tr>
<th>Índice</th>
<th>Canción</th>
<th>Artista</th>
</tr>
</thead>
<tbody>
<tr :key="indice" v-for="(cancion, indice) in canciones">
<td>{{indice}}</td>
<td>{{cancion.nombre}}</td>
<td>{{cancion.artista}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">
</script>
<script src="script.js">
</script>
</body>
</html>Lo único que cambia está en la línea 29, pues especificamos el atributo key.
A nivel de vista esto no cambia nada, pero cuando se desean vigilar y actualizar los cambios de un objeto esto es necesario. Además, siempre es una buena práctica especificar una clave.
Para terminar, veamos cómo repetir un elemento determinadas veces, algo como un simple ciclo for.
Si queremos repetir algo determinadas veces, especificamos un número en lugar de un arreglo u objeto.
Por ejemplo:
v-for="numero in 5"
Modifiquemos la vista para que ahora sea así:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Uso de v-for en Vue.js</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
</head>
<body>
<main role="main" class="container">
<div class="row">
<div class="col-12" id="app">
<h1>Uso de v-for en Vue.js</h1>
<a href="//parzibyte.me/blog">By Parzibyte</a>
<table class="table">
<thead>
<tr>
<th>Índice</th>
<th>Número</th>
</tr>
</thead>
<tbody>
<tr :key="indice" v-for="(numero, indice) in 5">
<td>{{indice}}</td>
<td>{{numero}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">
</script>
<script src="script.js">
</script>
</body>
</html>Presta atención a la línea 28. Lo que hacemos es contar del 1 al 5, usando un índice.
El script queda así (solo se define la app y su elemento, pero no hay datos, porque el ciclo se hace en la vista):
new Vue({
el: "#app",
});Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Esta web usa cookies.