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>
Introducción: fundamentos de Vue.js
¿Cómo convertirte en frontend developer con Vue.js?
La magia de aprender JavaScript
¿Qué es Vue.js? Frameworks, librerías y componentes
Declarative rendering con JavaScript
Declarative rendering con Vue.js
Reactividad a profundidad
¿Qué es la reactividad?
¿Qué es un Proxy?
Crea tu propio miniframework: MiniVue
Implementando un Proxy en MiniVue
Implementando Reflect en MiniVue
Reactividad con effect, track y trigger
Implementando effect, track y trigger en MiniVue
Templates de Vue.js
Disclaimer sobre los Templates
Proyecto: PlatziCommerce con Vue.js
Expresiones
Atributos
Conditional rendering
List rendering
Event handling
APIs internas de Vue.js
Options API vs. Composition API
data() y ref()
Métodos personalizados con Options API
Métodos personalizados con Composition API
reactive()
Segunda capa: componentes de Vue.js
Componentes de Vue con Options API
Componentes de Vue con Composition API y props
Reto con componentes
Custom events o eventos personalizados con Options API
Custom events o eventos personalizados con Composition API
Watchers con Options API
Watchers con Composition API
Computed properties con Options API
Computed properties con Composition API
Ciclos de vida de un componente
Ciclos de vida de un componente: Composition API
Siguientes pasos
Continúa tu ruta de aprendizaje profesional con Vue.js
Siguientes pasos con Vue.js
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
Aportes 9
Preguntas 2
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 = (
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.