I have been working on a chat messaging system, where I initially populate the store with root messages and then map the state of that list (array). Everything works fine when posting a new message - the store updates and displays the new post. However, I encountered an issue with reply threads to root messages. I nested another component for replies, and when I click the show replies button, an object with the list of replies is rendered perfectly. But if I open a thread and post a new message above it, the reply thread from the previous message disappears.
This is how my data structure looks like:
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...
]
}
}
The main component loops over the messages like this:
<b-list-group>
<root-message-component
v-for="(m, index) in rootMessages"
:message="m"
></root-message-component>
</b-list-group>
The root message component displays the root info and then loops through the replies:
<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>
Then the ReplyMessageComponent will display the text in the body etc.
When the reply thread is open, the HTML layout appears as expected. However, whenever a new message is posted (by unshifting a new message to the root messages array in the store), the reply thread HTML is replaced by <!---->.
An interesting observation is that deleting the newly added root message causes the reply thread to reappear correctly! It seems like the reply thread is stuck in its position in the DOM and does not move along with the outer component.