Estoy creando un sistema de mensajería de chat, donde completo la tienda con mensajes raíz y luego mapeo el estado de esa lista (matriz). Al publicar un nuevo mensaje, la tienda se actualiza y se mostrará la nueva publicación, todo OK. El problema es que el mensaje raíz puede tener un hilo de respuesta, así que anidé otro componente y cuando se presiona el botón Mostrar respuestas, completo un objeto con la lista de respuestas y eso también se procesa bien, pero si ese hilo está abierto y publico un nuevo mensaje encima elimina el hilo de respuesta del mensaje anterior.
La estructura de mis datos es así: (Tendré una matriz de estos)
rootMessages { id: 1234, body: 'some message text', etc... replyMessages: { replies: [ replyMessage { id: 4567, body: 'some reply 1', replyTo: 1234 }, replyMessage { id: 4568, body: 'some reply 2', replyTo: 1234 }, etc... ] } }El componente principal recorrerá los mensajes
<b-list-group> <root-message-component v-for="(m, index) in rootMessages" :message="m" ></root-message-component> </b-list-group>El componente de mensaje raíz mostrará la información raíz y luego repetirá las respuestas.
<template> <div> <b-list-group-item> <p>{{message.body}}</p> // etc.. </b-list-group-item> <div class="reply-container"> <b-list-group> <reply-message-component> v-for="(r, index) in message.replyMessages.replies" :reply="r" </reply-message-component> </b-list-group> </div> </div> </template>Luego, ReplyMessageComponent mostrará el texto en el cuerpo, etc.
Entonces, si el hilo de respuesta está abierto, el html se procesa y se muestra como se esperaba, pero cuando se publica un nuevo mensaje (desplace un mensaje nuevo a la matriz de mensajes raíz en la tienda), el html del hilo de respuesta se reemplaza en el DOM con <!---->
Lo interesante es que si elimino ese nuevo mensaje raíz, ¡el hilo de respuesta vuelve a aparecer correctamente! Es como si el hilo de respuesta estuviera atascado en esa posición en el DOM y no fuera empujado hacia abajo con el componente externo.
Gracias Christopher Shroba, tu comentario sobre el uso de claves con el enlace para mantener el estado, realmente ayudó. Estaba usando claves para mis bucles pero estaba usando el índice así
v-for="(m, index) in rootMessages" :key="index"
y lo mismo en mis mensajes de respuesta
lo que tenía que hacer era dar claves únicas en ambas matrices, así que terminé usando los ID de mensaje/respuesta que sé que son únicos, así
v-for="(m) in rootMessages" :key="m.id"
y
v-for="(r) in replyMessages" :key="r.id"
Ahora esto me da el comportamiento esperado.