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]是为选择特定数据而传递的选定聊天室的编号（对于chatroom1，为0，...）

当试图在一个循环中遍历文本和时间时（我肯定希望时间显示在每个文本消息之外，而不是在所有消息之后），我认为类似的事情也可以完成：

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

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

2 个答案: