Directiva v-for

Otra directiva muy importante es la directiva "v-for". Para esto vamos a crear un ejemplo nuevo. Vamos a crear, por ejemplo, un componente que se va a llamar "ProductList". Este componente va a mostrar una lista de productos, entonces vamos a partir teniendo un template y teniendo, y teniendo una etiqueta script. Esto sería nuestra base para empezar a escribir nuestro componente "ProductList". Bien, lo que vamos a hacer es poner un elemento "ul" una lista de elementos no ordenados a “unordered list” y en su interior vamos a poner varios elementos. Por ejemplo, vamos a poner “producto 1”, “producto 2”, y “producto 3”. En el navegador todavía se sigue mostrando nuestro componente contador. Para mostrar este otro componente tenemos que actualizar nuestro archivo "main". Entonces por aquí vamos a poner "ProductList" y vamos a llamar a esto "ProductList" y a crear nuestra aplicación a partir de este componente. Entonces, volviendo al navegador, tenemos aquí una lista de productos. La diferencia entre "ul" y "ol" es que "ol" es una lista ordenada y por lo tanto enumera a los elementos que están en su interior. En este caso tenemos una lista con guiones, por eso lo dejamos como "ul" bien. Nosotros no queremos que los elementos estén “hardcoded”. No queremos que esté en fijos de manera constante en el template. Queremos que el template sea capaz de mostrar una lista de productos que se va a definir en el estado del componente. Por lo tanto, vamos a tener una variable de estado llamada “products”, que va a tener en su interior tres productos. Por ejemplo, un primer producto tendrá como nombre “silla” con un precio de 56. Un segundo producto tendrá como nombre “monitor” y su precio será mayor. Vamos a agregar un tercer producto, por ejemplo “micrófono”, y su precio será este de aquí. Tenemos dentro de nuestra "data" un objeto que define el estado de nuestro componente y en este caso el estado está compuesto solamente por una variable “products”. La variable “products” es un arreglo que contiene tres objetos. Entonces, ¿Cómo podemos mostrar la información de estos tres productos de manera dinámica? Podemos usar para ello un “v-for”. Si usamos un "v-for", tenemos que indicar qué arreglo queremos recorrer y con qué nombre queremos acceder a cada elemento dentro de este arreglo. Un ejemplo sería “product in products”. Queremos recorrer cada producto que está en este arreglo de products. Si lo dejamos hasta aquí, esto va a repetir tres veces la palabra “producto” como podemos ver acá. Si nosotros queremos imprimir la información, lo que tenemos que hacer, en cambio, es a partir de esta variable product acceder al nombre. Entonces, por ejemplo, podemos poner “nombre” y dentro de unos paréntesis tener el “precio”, que en este caso sería “product.price”. Y de esta manera es como podemos mostrar una lista de elementos usando un “v-for”. Ten en cuenta que el “v-for” va a repetir esta etiqueta, en este caso una etiqueta “li”. Podría tratarse de un componente cart, con una tarjeta para representar a cada producto y tendríamos tres tarjetas. En la lección siguiente vamos a ver cómo podemos hacer uso de un componente dentro de otro.

Crea una cuenta y continúa aprendiendo 🚀

Directiva v-for