For my current project, I am implementing a chat system using VueJS and socket.io for interactions between admins and clients. However, I am facing an issue where adding a new row in the admin chats with the client's name upon connection and removing it when they disconnect is not functioning properly. It seems that even after a user disconnects, the chat remains visible until I manually reload the page.
Here is a snippet of my template:
<div class="chats" id="chat" v-if="chats.length >= 1">
<div class="chat" v-for="chat in chats">
<b>{{ chat.clientName }}</b>
<p>ID: {{ chat.clientID }}</p>
<div class="jens-button">
<img src="/icons/chat-bubble.svg">
</div>
</div>
</div>
<div class="chats" v-else>
<div class="chat">
<b>There are no chats available.</b>
</div>
</div>
And here is a portion of my data and method setup:
data() {
return {
chats: [],
}
},
method() {
socket.on('update clients', (clients) => {
console.log(clients);
this.chats = [];
if(clients.length >= 1) {
this.chats = clients;
} else {
this.chats = [];
}
});
}
I am seeking assistance in identifying what might be causing this malfunction in my chat system. Any insights or explanations would be greatly appreciated. Thank you!