Directiva v-for para listas en Vue.js

Aprende a dominar el list rendering en Vue.js para que tu carrito refleje productos reales sin trabajo manual. Conecta tu data al template, usa la directiva before, define un key único y aprovecha el índice para imágenes y estilos dinámicos.

¿Cómo conectar la data del carrito para renderizar listas en Vue.js?

Para dejar de maquetar productos a mano, se define en la data una propiedad carrito como arreglo con múltiples productos. Cada objeto incluye nombre, precio, stock e imágenes. Con esta estructura, el template puede iterar y tomar el valor de cada campo sin duplicar HTML.

• Define carrito como arreglo de objetos con productos.
• Reutiliza nombre y precio; el stock puede quedar igual por ahora.
• Conecta el arreglo al template para que todo sea dinámico.

¿Por qué el template refleja nombre, precio e imágenes sin repetir HTML?

Porque al iterar, cada bloque hereda el contexto del elemento actual (por ejemplo, product). Así, expresiones como product.name o product.images[0] se resuelven por producto.

• El contexto interno es el objeto actual del arreglo.
• Cada campo en el HTML toma su valor del producto correspondiente.

¿Qué hace la directiva before y por qué usar key único en el virtual dom?

La directiva before recorre los elementos del arreglo y asigna un alias legible, por ejemplo, product. Además, se debe indicar un key único por elemento para que Vue gestione cambios y reordenamientos en el virtual dom correctamente.

<!-- Iterar productos del carrito -->
<div before="product in carrito" :key="product.name">
  <h3>{{ product.name }}</h3>
  <p>{{ product.price }}</p>
  <!-- contenido del producto -->
</div>

• Usa un alias claro: product.
• El key debe ser único: product.name.
• El key ayuda a Vue a detectar cambios y reordenamientos.

¿Cómo acceder al contexto product dentro del template?

Todo lo que se escribe dentro del bloque iterado usa el contexto de product. Así, puedes mostrar imágenes, nombre y precio sin repetición manual.

• product.images[0] accede a la primera imagen.
• product.name y product.price pintan sus valores.

¿Cómo usar el índice para thumbnails, active image y estilos dinámicos?

Al iterar las imágenes de cada producto, es útil capturar el índice. Esto permite reemplazar referencias estáticas (como images[0]) por una referencia dinámica y controlar estados como active image.

<!-- Iterar thumbnails por producto -->
<div before="(image, index) in product.images" :key="image">
  <img :src="image" :class="{ active: index === activeImage }" />
</div>

• El segundo parámetro de before es el índice.
• El key puede ser la URL de la imagen.
• active image depende del índice definido en la información.

¿Cómo alternar estilos con índice impar o par?

Puedes aplicar una clase dinámica para diferenciar filas en el carrito. Se activa, por ejemplo, cuando el índice es impar.

<div before="(product, index) in carrito" :key="product.name"
     :class="{ 'background gray': index % 2 !== 0 }">
  <!-- contenido del producto -->
</div>

• Clase dinámica: se evalúa con una condición booleana.
• Índice impar: index % 2 !== 0.
• Efecto visual rápido para mejorar legibilidad.

¿Qué habilidades y conceptos quedan claros para tu flujo de trabajo?

• List rendering: recorrer arreglos en el template con before.
• Alias de elemento: product para legibilidad y alcance del contexto.
• key único: estabilidad en el virtual dom y reordenamiento fiable.
• Índice: controla thumbnails, active image y estilos condicionales.
• Clases dinámicas: activar background gray en filas impares.

¿Te quedó alguna duda sobre before, key o el manejo del índice en imágenes y estilos? Comparte tu pregunta y el fragmento de tu código para ayudarte mejor.