Vue JS聊天应用程序UI

Question

大家好！ 我正在使用Laravel + Laravel Echo + Pusher和Vue JS开发一个聊天应用程序 所有功能都很好，但是我的用户界面有问题。

如果您有新的聊天，您的消息将显示在右侧，如果某人在聊天框中发送了聊天，则他/她的消息将显示在左侧。

我已经创建了用户界面

<div class="chat-log-container" id="chatlog">
    <div class="chat-log-content">
        <div v-if="currentSender === meSender">
            <ul id="mesender" class="me-sender" v-for="message in chats">
                <li>
                    <div class="sender-name" >{{message.user.firstname}} {{message.user.lastname}} 10:12 AM, Today</div>
                    <div class="sender-message wordwrap">{{message.chat}}</div>
                </li>
            </ul>
        </div>

        <div v-else>
            <ul class="other-sender" v-for="message in chats">
                <li>
                    <div class="sender-name" >{{message.user.firstname}} {{message.user.lastname}} 10:12 AM, Today</div>
                    <div class="sender-message wordwrap">{{message.chat}}</div>
                </li>
            </ul>
        </div>
    </div>
</div>

每当我发消息时，所有消息都将显示在右侧，如果有人发送了聊天，则所有消息都将显示在左侧。

有人知道如何使我的消息显示在右侧，而其他发件人消息将显示在左侧吗？

谢谢！