Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Crea una cuenta y continúa aprendiendo 🚀
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.
Creación de un nuevo ejemplo
Vamos a crear un componente llamado ProductList. Este componente mostrará una lista de productos.
Para comenzar, necesitamos:
- Un
template. - Una etiqueta
script.
Esta será nuestra base para escribir el componente ProductList.
Estructura inicial
Usaremos una lista no ordenada (ul) para mostrar los productos:
<ul>
<li>producto 1</li>
<li>producto 2</li>
<li>producto 3</li>
</ul>
Al visualizar en el navegador, sigue mostrándose el componente contador. Para solucionar esto:
- Actualizamos
main.js. - Importamos
ProductList. - Creamos la aplicación con este componente.
Diferencia entre ul y ol
-
ul(unordered list) → Lista con guiones. -
ol(ordered list) → Lista numerada.
Hacer la lista dinámica
No queremos que los elementos estén "hardcoded". La lista debe generarse dinámicamente a partir del estado del componente.
Definimos una variable de estado products:
data() {
return {
products: [
{ name: "silla", price: 56 },
{ name: "monitor", price: 120 },
{ name: "micrófono", price: 75 }
]
};
}
Uso de v-for
Para mostrar los productos de manera dinámica, usamos v-for:
<li v-for="product in products">{{ product.name }} ({{ product.price }})</li>
Explicación:
-
v-for="product in products"→ Itera sobre el arregloproducts. -
{{ product.name }}→ Muestra el nombre del producto. -
({{ product.price }})→ Muestra el precio.
Renderización de elementos
El v-for repetirá la etiqueta li para cada producto.
También podríamos usar un componente Cart en lugar de li, para representar cada producto como una tarjeta.
Próximo paso
En la siguiente lección veremos cómo usar un componente dentro de otro.
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 preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript