Читать книгу Aprender VueJS con 100 ejercicios prácticos - Angel Vazquez Vazquez - Страница 24

Hemos visto cómo mostrar una enumeración de productos de nuestra lista de la compra con la directiva v-for y en este ejercicio veremos cómo mostrar un listado de las propiedades de un objeto de nuestra instancia Vue.

Tenemos una propiedad dentro de la instancia Vue que es un objeto que representa la información de uno de los posts de nuestro blog y que queremos renderizar.

post: {

title: ‘Nuevo artículo’,

date: ‘24/03/2019’,

author: ‘Ramón’,

}

Ahora lo que tenemos que hacer es usar la directiva v-for con el siguiente formato, descomponiendo el objeto en sus propiedades en pares clave-valor.

<ul>

<li v-for=”(value, key) in post” v-blue>

{{ key }}: {{ value }}

</li>

</ul>

También podríamos usar el índice en esta descomposición, si lo necesitáramos, de la siguiente manera:

<ul>

<li v-for=”(value, key, index) in post”

style= “list-style-type:none;” v-blue>

{{ index + 1 }} => {{ key }}: {{ value }}

</li>

</ul>

Podemos ver el resultado de la inspección del objeto en la imagen [1] y para seguir jugando con nuestro ejemplo meter un nuevo atributo y ver cómo se renderiza perfectamente cuando guardamos. [2]