Estoy aprendiendo Vue Js.
Actualmente estoy haciendo una aplicación de ejemplo de chat con SCSS y Vue Js.
En mi proyecto, he decidido configurar algunas animaciones CSS en el cuadro de mensajes.
Aquí está el fragmento del código de animación:
SCSS:
.push { ... animation-duration: 0.3s; animation-timing-function: linear; animation-fill-mode: forwards; &.received { ... animation-name: inFromLeft; } &.sent { ... animation-name: inFromRight; } } @keyframes inFromRight { 0% { right: -100%; } 100% { right: 0; } } @keyframes inFromLeft { 0% { left: -100%; } 100% { left: 0; } }HTML/VUE:
<div id="chat"> <div v-for="(message, index) in messages" :key="index" class="push" :class="type(message)"> ... </div> </div>Todos los mensajes se almacenan en el objeto de los usuarios en formato de matriz (es). (con datos vue).
El problema es que algunos mensajes usan la animación y otros no.
Creo que este problema está relacionado con vue y su método para cargar matrices.
Aquí hay una demostración del resultado final:
https://www.youtube.com/watch?v=EYsBk4HboD8
¿Puede alguien ayudarme a entender el problema y cómo solucionarlo?
(Prefiero usar animaciones CSS y evito usar la transición vue en este momento).
¡Gracias!
El problema está en :key="index" , cambiando la clave para que sea única por mensaje. debería solucionar el problema
Explicación: Vue rastrea cada elemento único en el ciclo a través de claves para evitar eliminar y volver a renderizar elementos a menos que realmente hayan cambiado, establecer claves de mensajes como su índice hace que Vue piense que no se agregó ningún elemento nuevo si se eliminó el elemento en el índice 3 y un se agregó un nuevo elemento con la misma clave
lea más sobre esto aquí https://vuejs.org/v2/guide/list.html#Array-Change-Detection