[Vuejs]-Looping through Object containing two different arrays in VueJS

by

2👍

✅

This should work.

<div v-for="(message, index) in messages[values.num].text">
   <p class="message-class message-send">{{ message}}</p>
   <span class="message-time-send">{{ messages[values.num].time[index] }}</span> 
</div>
👤Alireza Esfahani

1👍

Generally, a structure like this would be preferrable:

messages: [
  [ // room 1
    {
      "time": "08:38",
      "text": "first message chatroom1"
    },
    {
      "time": "09:02",
      "text": "second message chatroom1"
    }
  ],
  ...
]

Because logically, timestamp and message text are both properties of one single "chatroom message" item. But if you can’t or do not want to change your structure, you can get the index in a v-for statement like this: v-for="(message, index) in messages[values.num].text" (see the official docs). Then you can use that same index to access the corresponding item in the time array:

<div v-for="(message, index) in messages[values.num].text">
  <p class="message-class message-send">{{ message}}</p>
  <span class="message-time-send">{{ messages[values.num].time[index] }}</span> 
</div>
👤Constantin Groß

Leave a comment