Vue js 为每个不间断的接收消息集在最后一个元素放置一个图标

Question

我遇到了这个外观问题，其中有一个 v-for 消息获取循环，我希望接收到的连续消息的每条最后一条消息都带有您正在聊天的用户的图标。就像图片中的相关。

现在...我知道如何设计它...但是 v-for 循环阻止我使用这样的东西...

<div class="messagegroup recieved">
  <div class="iconcontainer">
    <div class="iconcontainerinner">
      <img class='usericoncontacts' src="../assets/icons8-male-user-100.png" alt="">
    </div>
  </div>
  <div class="textmessages recieved">
    <div class="message">
      <span>Hello</span>
    </div>
    <div class="message">
      <span>How are you?</span>
    </div>
  </div>
</div>

看起来像这样

但是，因为我无法以某种方式对收到的短信进行分组，所以我必须继续使用类似这样的代码...

<div v-if='selectedContact' class="textmessages">
  <div
    v-for="message in messages" 
    v-if="message.messageTo == selectedContact.userid || message.messageFrom == selectedContact.userid"  
    :key="message.messageFrom" 
    :class="[message.messageFrom==authUser.uid?'message':'message recieved']"
  >
    <span>{{ message.message }}</span>
  </div>
</div>

不幸的是，它只提供了看起来像这样的基本聊天结构...

消息数组是一个 objects 数组，其中包含这样的数据...

author: "Matěj Pospíšil"
createdAt: July 13, 2020 at 2:43:17 PM UTC+2
message: "Hello"
messageFrom: "exl21qLb1yW3qNUFgpcZv3BRnyI2"
messageTo: "xTw8bWpVTwaj05TBTudBNLV2XEE3"

如果你能以某种方式理解我蹩脚的英语，请教我。我敢打赌这件事很微不足道，但我在网上找不到任何答案，所以请多多关照... 提前谢谢你

Answer 1

我正在对您的数据结构进行一些大的猜测，但我要做的是创建一个计算的属性来做两件事...

将消息列表过滤为来自或发送给所选用户的消息
将消息分成已发送和已接收的组

computed: {
  conversation () {
    if (!this.selectedContact) {
      return []
    }
    // filter for the selected user
    const messages = this.messages.filter(({ messageTo, messageFrom }) =>
      messageTo === selectedContact.userid || messageFrom === selectedContact.userid)

    // create a new array chunked by sender
    return messages.reduce((chunks, { messageFrom, message }) => {
      let last = chunks[chunks.length - 1]
      if (last?.uid !== messageFrom) {
        chunks.push(last = {
          uid: messageFrom, 
          messages: [],
          received: messageFrom !== this.authUser.uid // a handy flag for CSS classes
        })
      }
      last.messages.push(message)
      return chunks
    }, [])
  }
}

现在您可以使用它来驱动您的模板

<div
  v-for="messageGroup in conversation" 
  class="messagegroup" 
  :class="{ received: messageGroup.received }"
>
  <div v-if="messageGroup.received" class="iconcontainer">
    <div class="iconcontainerinner">
      <img class='usericoncontacts' src="../assets/icons8-male-user-100.png" alt="">
    </div>
  </div>
  <div class="textmessages" :class="{ received: messageGroup.received }">
    <div class="message" v-for="message in messageGroup.messages">
      <span>{{ message }}</span>
    </div>
  </div>
</div>

Vue js 为每个不间断的接收消息集在最后一个元素放置一个图标

Vue js for each uninterrupted set of recieved messages place an icon at the last element

arrays

foreach

for-loop

chat

vue.js