检查循环Vuejs中的值是否发生变化

Question

我正在通过 Vuejs 制作聊天应用程序，并希望处理循环中的消息是否属于新用户，以设置用户消息的样式颜色/背景颜色。

<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/114ynuq

非常感谢

Answer 1

可以使用一个computed属性，根据顺序确定每条消息的位置，然后，使用class-binding如下：

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>