En el concepto anterior pasamos en la propiedad de la componente un string, podemos pasar cualquier tipo de dato para que la componente lo procese
Veremos de pasar un vector de objetos literales a la componente.
Crear una componente llamada 'articulos' que tenga una propiedad que reciba un vector de objetos literales. El objetivo de la componente es mostrar los datos del vector de articulos en una tabla HTML:
<!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">
<articulos v-bind:datos="datos"></articulos>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
Vue.component('articulos', {
props:['datos'],
template: `<div>
<table border="1">
<tr><td>Código</td><td>Descripción</td><td>Precio</td></tr>
<tr v-for="art in datos"><td>{{art.codigo}}</td><td>{{art.descripcion}}</td><td>{{art.precio}}</td></tr>
</table>
</div>`
})
var app=new Vue({
el: '#aplicacion',
data: {
datos: [{
codigo: 1,
descripcion: 'papas',
precio: 12.52
},{
codigo: 2,
descripcion: 'naranjas',
precio: 21
},{
codigo: 3,
descripcion: 'peras',
precio: 18.20
}]
}
})
</script>
</body>
</html>
La componente articulos define una propiedad llamada 'datos':
Vue.component('articulos', {
props:['datos'],
En 'template' mostramos una tabla HTML y generamos las filas mediante la directiva v-for recorriendo el vector:
template: `<div>
<table border="1">
<tr><td>Código</td><td>Descripción</td><td>Precio</td></tr>
<tr v-for="art in datos"><td>{{art.codigo}}</td><td>{{art.descripcion}}</td><td>{{art.precio}}</td></tr>
</table?
</div>`
})
Recordemos que la etiqueta coincide con el nombre de la componente:
Hemos utilizado la directiva v-bind para la propiedad datos de la componente para enlazar el modelo de datos de datos de nuestra aplicación Vue.
Los datos se extraen de:
datos: [{
codigo: 1,
descripcion: 'papas',
precio: 12.52
},{
codigo: 2,
descripcion: 'naranjas',
precio: 21
},{
codigo: 3,
descripcion: 'peras',
precio: 18.20
}]
}
Si bien el problema se puede resolver sin componentes como hemos visto en conceptos anteriores, el empleo de las mismas nos permite encapsular el listado de artículos en una tabla HTML y reutilizarlo en distintas partes de nuestro sitio web solo con especificar:
<articulos v-bind:datos="datos"></articulos>