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

Posted 2023-02-22

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

【英文标题】：Vue js for each uninterrupted set of recieved messages place an icon at the last element

【发布时间】：2020-11-03 06:13:58

【问题描述】：

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

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

<div class="messagegroup recieved">
  <div class="iconcontainer">
    <div class="iconcontainerinner">
      <img class='usericoncontacts' src="../assets/icons8-male-user-100.png" >
    </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>

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

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

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

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

【问题讨论】：

你能举一个messages数组的例子吗？您上一个屏幕截图中的那个是理想的

请edit your question 提供该数据。

完成了，菲尔

【参考方案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" >
    </div>
  </div>
  <div class="textmessages" :class=" received: messageGroup.received ">
    <div class="message" v-for="message in messageGroup.messages">
      <span> message </span>
    </div>
  </div>
</div>

【讨论】：

哦，我错过了 1 个细节。我已经过滤了所有与 this.authUser.uid 有关的消息，无论它是 messageFrom 还是 messageTo。简而言之，我只获取与当前登录用户有关的消息，因此我不必从数据库中获取所有消息。

我的回答中的过滤器部分是关于显示发往或来自selectedContact 的消息。在您的问题中，您使用的是 v-if，但 Vue 会对此发出警告，您应该使用计算的

您得到的唯一错误是您没有将 this.selectedContact 应用于计算方法。否则效果很好，谢谢

不确定你的意思。它就在过滤器中