Veremos una variante cuando trabajamos con la directiva v-for y debemos iterar un arreglo con objetos para acceder a todos sus elementos.
Se tiene el siguiente arreglo con objetos literales que representan artículos:
articulos: [{
codigo: 1,
descripcion: 'papas',
precio: 12.52
},{
codigo: 2,
descripcion: 'naranjas',
precio: 21
},{
codigo: 3,
descripcion: 'peras',
precio: 18.20
}]
Mostrar en una tabla HTML los datos almacenados 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>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app=new Vue({
el: '#aplicacion',
data:{
articulos: [{
codigo: 1,
descripcion: 'papas',
precio: 12.52
},{
codigo: 2,
descripcion: 'naranjas',
precio: 21
},{
codigo: 3,
descripcion: 'peras',
precio: 18.20
}]
}
})
</script>
</body>
</html>
| Código | Descripción | Precio |
| {{articulo.codigo}} | {{articulo.descripcion}} | {{articulo.precio}} |
Podemos ver con que facilidad iteramos el arreglo de objetos y accedemos a cada uno de sus atributos para mostrarlos en las celdas de la tabla HTML:
<template v-for="articulo in articulos">
<tr>
<td>{{articulo.codigo}}</td>
<td>{{articulo.descripcion}}</td>
<td>{{articulo.precio}}</td>
</tr>
</template>
Nuevamente aclarar que los datos del arreglo se recuperarán normalmente del servidor en forma dinámica, más adelante veremos eso, ahora nos interesa cual es la sintaxis de Vue tanto en la vista donde definimos las directivas como en la sintaxis para trabajar con el objeto Vue.