I'm currently working on a chat program written in VueJS and have a problem when trying to display the message with a given timestamp, because I need to loop inside an object containing two arrays (message array and timestamp array)
My data object looks like this:
messages: [ //saving text-messages of each chatroom in order (0 => chatroom1, 1 => chatroom2, ..)
{ //chatroom1 with static data for testing
text: ["first message chatroom1", "second message chatroom1"],
time: ["08:38", "09:02"]
},
{ //chatroom2
text: [],
time: []
},
{ //chatroom3
text: [],
time: []
}
]
When I would try to loop only through the text[] Array, my code would look like this:
<p class="message-class message-send" v-for="messages in messages[values.num].text">{{ messages }}</p>
giving me back
<p class="message-class message-send">first message chatroom1</p> //messages[0].text[0]
<p class="message-class message-send">second message chatroom2</p> //messages[0].text[1]
The [values.num] is the number of the selected chatroom passed in order to select the specific data (0 for chatroom1, ...)
When trying to iterate through text and time in one single loop (surely I want the time to be displayed beyond every single text message and not after all messages) I thought something similar to this should do the work:
<div v-for="messages in messages[values.num]">
<p class="message-class message-send">{{ messages.text }}</p>
<span class="message-time-send">{{ messages.time }}</span>
</div>
The problem in this case is that I display the whole text and time array without iterating through the arrays itself.
Trying something like
<p class="message-class message-send">{{ messages.text[some number] }}</p>
also doesn't work.
Is there anyone who can help me solving this problem? Or should I consider trying to build the messages object in a different way