¡Suscríbete y continúa aprendiendo!

Esta lección está disponible únicamente para suscriptores.

Regístrate o inicia sesión para continuar aprendiendo:

Frontend Aprendiz

Directiva v-for

Veamos cómo mostrar elementos en nuestro template según un arreglo de datos, haciendo uso de la directiva v-for.

Esta lección no cuenta con recursos adicionales.

Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.

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.

¿Tienes dudas?

Publicar pregunta

¡Comparte conocimiento!

Volver al índice

Regístrate

Inicia sesión para llevar un control de tu progreso.

Capítulos
































32

Directiva v-for




























































































Espera un momento ...

¿Te gustaría llevar mi curso de Laravel, gratis?

Sólo debes ingresar tus datos: