Saya membuat aplikasi obrolan oleh vuejs dan ingin menangani jika pesan di loop termasuk pengguna baru untuk warna gaya / latar belakang pesan pengguna.

<template v-for="msg in allMsgs">
  <li :key=msg.id>  //I want to add some class to handle if next message belong to new user.
     <span class="chatname">{{msg.user.name}}</span>
     {{msg.content}}
  </li>
</template>

https://prnt.sc/114eNuq.

Terima kasih banyak

1
Hai Tien 4 April 2021, 18:11

1 menjawab

Jawaban Terbaik

Anda dapat menggunakan properti computed untuk menentukan posisi setiap pesan sesuai urutan, dan kemudian, gunakan class-binding sebagai berikut:

new Vue({
  el:"#app",
  data: () => ({
    allMsgs: [
      { id:1, user: { name:'B' }, content:'contentB' },
      { id:2, user: { name:'A' }, content:'contentA' },
      { id:3, user: { name:'A' }, content:'contentA' },
      { id:4, user: { name:'B' }, content:'contentB' },
      { id:5, user: { name:'B' }, content:'contentB' },
      { id:6, user: { name:'A' }, content:'contentA' },
      { id:7, user: { name:'A' }, content:'contentA' }
    ]
  }),
  computed: {
    messages: function() {
      let pos = 1, prev = null;
      return this.allMsgs.map((msg, index) => {
        // if msg is not the first, and it belongs to a new user, opposite pos
        if(index !== 0 && msg.user.name !== prev.user.name) pos *= -1;
        msg.position = pos;
        prev = msg;
        return msg;
      });
    }
  }
});
.chatname { font-weight:bold; }
.left { text-align:left; }
.right { text-align:right; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <template v-for="(msg, index) in messages">
    <li 
      :key=msg.id 
      :class="{ 'right': msg.position === 1, 'left': msg.position === -1 }"
    >
      <span class="chatname">
        {{msg.user.name}}
      </span>
      {{msg.content}}
    </li>
  </template>
</div>
5
Majed Badawi 5 April 2021, 15:33