Vue js для каждого непрерывного набора полученных сообщений поместите значок в последний элемент - PullRequest
Новая
       103

Vue js для каждого непрерывного набора полученных сообщений поместите значок в последний элемент

0 голосов
/ 14 июля 2020

У меня эта проблема cosmeti c, где есть v-for l oop для выборки сообщений, и я хочу, чтобы каждое последнее сообщение из серии полученных сообщений содержало значок пользователя, с которым вы общаетесь. Как на картинке.

notice the icon at the uninterruped end of recieved messages

Now... I know how to style it... But the v-for loop is preventing me from from using something like this...

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

что выглядит примерно так

enter image description here

but instead, because I'm unable to somehow group recieved text messages i must go on with code that goes something like this...

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

который, к сожалению, дает только эту базовую c структуру чата, которая выглядит примерно так ... введите описание изображения здесь

Массив сообщений - это массив объектов, в которых есть такие данные ... 

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

Пожалуйста, если вы каким-то образом понимаете мой сломанный английский sh, будьте так любезны и научи меня. Бьюсь об заклад, это тривиальная вещь, но я просто не мог найти никаких ответов в Интернете, поэтому, пожалуйста, будьте так любезны ... Заранее благодарю

1 Ответ

0 голосов
/ 14 июля 2020

Я делаю некоторые серьезные предположения о структуре ваших данных, но я бы создал вычисляемое свойство, которое выполняет две функции ...

  1. Фильтрует список сообщений только по одному от или к выбранному пользователю
  2. Разделите сообщения на группы отправленных и полученных 
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>
...