在VueJS中循环包含两个不同数组的对象

Question

我目前正在开发一个用 VueJS 编写的聊天程序，在尝试显示具有给定时间戳的消息时遇到问题，因为我需要在包含两个数组（消息数组和时间戳数组）的对象内循环

我的数据对象如下所示：

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: []
        }
]

当我尝试仅循环遍历 text[] 数组时，我的代码将如下所示：

<p class="message-class message-send" v-for="messages in messages[values.num].text">{{ messages }}</p>

还给我

<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]

[values.num] 是为选择特定数据而传递的所选聊天室的编号（0 表示 chatroom1，...）

当尝试在一个循环中迭代文本和时间时（当然，我希望时间显示在每条文本消息之外，而不是所有消息之后），我认为类似的东西应该可以完成工作：

<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>

在这种情况下的问题是我显示了整个文本和时间数组，而没有遍历数组本身。

尝试类似的东西

<p class="message-class message-send">{{ messages.text[some number] }}</p>

也不行。

有没有人可以帮我解决这个问题？或者我应该考虑尝试以不同的方式构建消息对象

Answer 1

这应该可行。

<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>

Answer 2

一般来说，最好采用这样的结构：

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

因为从逻辑上讲，时间戳和消息文本都是单个“聊天室消息”项的属性。但是，如果您不能或不想更改您的结构，您可以在v-for 语句中获取索引，如下所示：v-for="(message, index) in messages[values.num].text"（参见official docs）。然后您可以使用相同的索引来访问时间数组中的相应项：

<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>