使用 array.push() 后如何为数组中的每个元素应用自定义类？

Question

我正在尝试使用 Vue.js 编写类似于 WhatsApp 界面的消息 UI。每条消息都是数组中的一个元素，我的计划是将自定义类应用于每条消息，以便我可以通过检查用户名将消息向左或向右对齐。通过使用 .push() 向原始数组添加消息来发送消息。

我的代码如下：

        <div class="conversation" v-chat-scroll="{always: false, smooth: true}">

        <div v-for="message in conversationResources" :key="message.id" :class="{

            'my-message': conversationResources[conversationResources.length - 1].name == 'my name',

            'your-message': conversationResources[conversationResources.length - 1].name !== 'my name'

        }">

            <span class="message-info">{{ message.name }}: </span>

            <span>{{ message.content }}</span>

            <span class="timestamp">{{ message.timestamp }}</span>

        </div>

    </div>

以及每个类的相应 CSS 使它们左对齐或右对齐：

.my-message {

    text-align: right;

    background-color: blue;

}

.your-message {

    text-align: left;

发送消息：

sendMessage: function(inputMessage) {

            // Send message

            this.conversationResources.push({

                name: 'my name',

                content: inputMessage, 

                timestamp: moment.utc().format('LTS')

            })

            this.inputMessage = ''

结果是，每次我单击发送（触发 push()）时，所有先前消息的类都会更新为“我的消息”类并对齐到错误的一侧。因此，当我触发 push() 时，我需要之前消息的类保持不变。关于如何做到这一点的任何想法？

Answer 1

它们因此而更新 -1 : 'my-message':conversationResources[conversationResources.length - 1]您的聊天应该在左侧对齐所有文本，并且只为一位用户提供课程。所以全部向左对齐，创建 if 类（例如：获取哪个用户登录到您的选项卡中，等于用户已发布消息 - 如果此用户 === 已登录，则添加类以正确对齐。如果此处只需要一个类:)这肯定会起作用:)