Vue动态切换类名异常求助：始终显示'chat-item stranger'

核心问题 #

你的代码存在两个关键错误，导致类名始终是chat-item stranger：

1. 判断逻辑与循环上下文脱节
   updateClassValue函数没有针对当前循环的单条消息做校验，反而自己遍历整个消息列表，而且一进入循环就直接return，只会判断列表的第一个元素，和v-for循环中当前的message完全无关。

2. for...in遍历使用错误
   for...in遍历对象时拿到的是键名（索引/属性名），不是元素本身。所以eachMsg是字符串类型，根本没有_sender属性，eachMsg._sender会是undefined，和this.nickname对比自然不相等，直接返回false。

正确写法 #

直接针对当前循环的message做发送者校验，无需额外遍历整个列表：

模板部分

<div
  :class="isMyMessage(message) ? 'chat-item me' : 'chat-item stranger'"
  v-for="message in msg.itemList"
  :key="message.messageId"
>
  <!-- 消息内容 -->
</div>

（注：原v-for写的是message in msg，但函数里用的是msg.itemList，这里统一数据源确保逻辑匹配）

方法部分

methods: {
  isMyMessage(message) {
    // 直接判断当前消息的发送者ID是否等于当前用户标识
    return message._sender.userId === this.nickname;
  }
}

简化写法（可选） #

如果逻辑简单，也可以直接在模板内写判断，无需单独定义方法：

<div
  :class="`chat-item ${message._sender.userId === this.nickname ? 'me' : 'stranger'}`"
  v-for="message in msg.itemList"
  :key="message.messageId"
>
</div>

内容的提问来源于stack exchange，提问作者dlkhjs