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