My array of objects updates the last element with the new object added

Question

I created a web application that has chat feature, using Laravel + Vue. whenever i send a message i added the message to an array using unshift() method to display it like that of messenger app. However, it updates the last element in my array of object. I also use pinia store. To better understand the problem a code is shown below.

In my storeChats.js (this is my Pinia store file for chats)

import axios from "axios";
import { ref } from "vue";
import { defineStore } from "pinia"

export const useChatStore = defineStore('Chat', () => {
const conversation = ref(new Array())

return {conversation}
})

then in my chat component i have this code

//some code for template

//some code for imports

import { useChatStore } from '../../Store/storeChatNotif'

const storeChat = useChatStore();

const message = mess => {
if(mess == '' || !mess) ''
else
    if(mess.trim() != ''){
        
        axios.post('/chat/send', {
            user: storeChat.selectedUserChat.id,
            message: mess
        }).then(res => {
            let data = res.data
            
            if(storeChat.conversation.length == 0)
                storeChat.conversation.push(res.data)
            else{
                
                storeChat.conversation.unshift({...res.data})
            }
      
        }).catch(e => {
            //some code here for error
        })
    }

}

my message() is the method that sends the message.

each time the use clicks enter or send button the message() is triggered

now after the message is send to the server and store it to my database, it responds with the the created message, it returns like this:

{
    avatar: null,
    convoId: 53, //their conversation id
    created_at: "2023-03-07T13:11:16.000000Z",
    id: 3,
    message: "hi",
    name: "Anna Doe",
    receiver: 3, // id of the user who will receive the message
    seen: null,
    sender: 1, //id of the user who sends the message
    updated_at:"2023-03-07T13:11:16.000000Z"
}

now this object is then added to storeChat.conversation as you can see from the code above in my chat component.

the problem is this, whenever is send a new message it updates the last element in my array of objects which is the storeChat.conversation. So instead of getting a result like this:

[
  {
    avatar: null,
    convoId: 53, //their conversation id
    created_at: "2023-03-07T13:15:50.000000Z",
    id: 3,
    message:"hello",
    name: "Anna Doe",
    receiver: 1, // id of the user who will receive the message
    seen: null,
    sender: 3, //id of the user who sends the message
    updated_at: "2023-03-07T13:15:50.000000Z"
  },
  {
    avatar: null,
    convoId: 53, //their conversation id
    created_at: "2023-03-07T13:11:16.000000Z",
    id: 3,
    message: "hi",
    name: "Anna Doe",
    receiver: 3, // id of the user who will receive the message
    seen: null,
    sender: 1, //id of the user who sends the message
    updated_at:"2023-03-07T13:11:16.000000Z"
  }
]

i get this:

[
  {
    avatar: null,
    convoId: 53, //their conversation id
    created_at: "2023-03-07T13:15:50.000000Z",
    id: 3,
    message:"hello",
    name: "Anna Doe",
    receiver: 1, // id of the user who will receive the message
    seen: null,
    sender: 3, //id of the user who sends the message
    updated_at: "2023-03-07T13:15:50.000000Z"
  },
  {
    avatar: null,
    convoId: 53, //their conversation id
    created_at: "2023-03-07T13:15:50.000000Z",
    id: 3,
    message: "hello",
    name: "Anna Doe",
    receiver: 3, // id of the user who will receive the message
    seen: null,
    sender: 3, //id of the user who sends the message
    updated_at:"2023-03-07T13:11:16.000000Z"
  }
]

to understand more the image is shown below:

first message:

then after sending another message:

after sending another message:

as you can see the first message being send is updated with the new sent message.

can someone tell me why?

Answer 1

It seems like that might be due to these few lines

if(storeChat.conversation.length == 0)
  storeChat.conversation.push(res.data)
else{
  storeChat.conversation.unshift({...res.data})
}

I see that you are creating a new object in unshift but not on push

Although it is not making sense to me why res.data would be getting reused, based on the results it seems to indicate that res.data is an instance that is getting updated instead or replaced. If that is the case this should fix it

storeChat.conversation.push({...res.data})