Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

List rendering

18/37
Recursos

Aportes 9

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Sí tu Objeto no tiene un ID único para el KEY lo puedes definir de la siguiente manera

<div v-for="(image, index) in product.images" :key="index">
	...
</div>

El v-for SIEMPRE debe llevar un v-key.
.
Algo curioso que también podemos hacer con los v-for es que también podemos incrementar de uno en uno de manera numérica usando esta sintaxis:

<span v-for="i in 10" :key="i">
	{{ i }}
</span>

De esa manera será un for del 1 al 10.
.
Para incrementar de dos en dos o más es más complicado, ya que tendrías que apoyarte de alguna computed property, tengo una pregunta en Stack Overflow sobre esto:
.
How can i do an equivalent JS for in vue? (Increments in n numbers)
.
Dejo el código de esta clase:
.
https://github.com/RetaxMaster/vue3-platzi-commerce/tree/879e4fa07926b7cbf4e21ef8aa1b60ef8a257ae8

Creo que estos conceptos ya se cubren en otros cursos de vue 2, me gustaria ver mas contenido o mejoras de vue 2 a vue 3

Tip: en el ciclo donde se renderizan los thumbnails es más legible establecer el valor de la propiedad backgroundImage con image.thumbnail

<div
  v-for="(image, index) in product.images"
  ...
  :style="{ backgroundImage: 'url(' + image.thumbnail + ')' }"
></div>

List rendering
Cabe a clarar que es recomendable más no reglar el optar por asignar v-key.
La razón es por el manejo del estado, nosotros podemos delegarle la actividad de asignarle la identificación de los nodos a Vuejs, siempre y cuando no se tenga una relación (como lo es un bind data o model ).
V-Key
ES utilizado por Vue para identificar VNodes y pueda diferencias de “contenido estático” vs “contenido dinámico”. Si lo delegamos a Vue, es decir omitimos v-key, Vue utiliza un algoritmo que indica o determina esta lista nodos como “estáticos”.
Si lo indicamos, simplemente optimizamos el proceso de destrucción de los elementos.

He aprendido mucho con estos videos,
excelentes clases.

He aprendido para que sirve el v-if , v-else-if , v-else,
y la diferencia que tiene respecto a v-show, asimismo,
he aprendido acerca de v-model, v-bind, v-for,
:class.

Creo que en vez de poner

:style="{backgroundImage: 'url(' + product.images[index].thumbnail + ')' }

Yo pondría:

:style="{backgroundImage: 'url(' + image.thumbnail + ')' }

Ya que para eso se hace el recorrido del array con v-for.

No me quedó muy claro el use de Index

la fuente no se ve bien en tablets = (