使用 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 类（例如：获取哪个用户登录到您的选项卡中，等于用户已发布消息 - 如果此用户 === 已登录，则添加类以正确对齐。如果此处只需要一个类:)

这肯定会起作用:)