I am currently working on incorporating a chat feature into my application, utilizing Typescript, Firebase, and Pinia. Users are able to create and join chat rooms where they can exchange messages. However, I am facing an issue where the DOM does not update automatically after sending a message; instead, I have to manually reload the page each time. I attempted to use a ref in the store within the currentChatRoom and implemented a watcher, but unfortunately, it did not resolve the problem.
This is an overview of the chatStore:
import { defineStore } from 'pinia'
import axios from 'axios'
import type { ITask, INewtask } from "../types/Task"
// Remaining code omitted for brevity
Below is an excerpt showcasing the component responsible for displaying the messages:
<template>
<div class="chat-container">
<div> Chat </div>
<div> {{ chatStore.chatRoom.createChatName }}</div>
<div> {{ chatStore.joinChatName }}</div>
<h4>Messages:</h4>
<div
v-for="(message, index) in messagesArr"
:key="index"
>{{ message.messages }}</div>
</div>
<form class="chat-input">
<input
type="text"
v-model="chatStore.messageInput"
name="messages"
placeholder="write something..."
>
<button @click.prevent="chatStore.SendMessage()">Send</button>
</form>
</template>
<script setup lang="ts">
import useChatStore from '@/stores/chat'
// Remaining script content omitted for brevity
</script>
<style>
.chat-input input {
width: 100%;
}
.chat-container {
display: flex;
height: 100%;
flex-direction: column;
align-items: center;
}
</style>