Как я могу определить цвет для пользователя в чате

Question

У меня есть чат с пушером, он работает хорошо, но теперь я хотел бы изменить цвет вашего собственного имени пользователя, когда вы разговариваете.На данный момент мое имя пользователя и имя другого пользователя выделены черным, но я хотел бы, чтобы имя вашей учетной записи было другого цвета, чтобы знать, когда вы разговариваете.(Мой английский немного средний, извините, если вам нужно больше объяснений) Спасибо за помощь

Это в моем app.blade

    <div class="row">
                        <div class="col-md-12 col-md-offset-2">
                            <div class="col-md-12 col-md-offset-2">
                                <div class="panel-body panel-content" id="mess_cont">

                                    <chat-messages id="mess" :messages="messages"></chat-messages>
                                </div>
                                <div class="panel-footer">
                                    <chat-form
                                            v-on:messagesent="addMessage"
                                            :user="{{ Auth::user() }}"
                                    ></chat-form>
                                </div>
                            </div>
                        </div>
                    </div>

Это мой ChatMessages.vue:

<template>
    <ul class="chat messages" >
        <li class="left clearfix list-group-item" v-for="message in messages" >

        <div class="chat-body clearfix">
                <div class="header">
                    <strong class="primary-font" >
                        {{ message.user.firstName }}
                        {{ message.user.lastName}}
                    </strong>
                </div>
                <p>
                    {{ message.message }}
                </p>
            </div>
        </li>
    </ul>
</template>

<script>
    export default {
        props: ['messages']
    };


</script>

Answer 1

Предполагая, что ваша User модель имеет какой-то id, вы можете применять классы или стили CSS на основе идентификатора автора сообщения.
Это может быть что-то вроде

<chat-messages id="mess" :messages="messages" :currentuserid="{{Auth::user()->id}}"></chat-messages>

<template>
    <ul class="chat messages" >
        <li class="left clearfix list-group-item" v-for="message in messages" >

        <div class="chat-body clearfix">
                <div class="header">
                    <strong class="primary-font "  
                            v-bind:class="{
                                classForAuthorSameAsUser: (message.user.id === currentuserid),
                                classForAuthorDiffThanUser: (message.user.id !== currentuserid)
                            }">
                        {{ message.user.firstName }}
                        {{ message.user.lastName}}
                    </strong>
                </div>
                <p>
                    {{ message.message }}
                </p>
            </div>
        </li>
    </ul>
</template>

<script>
    export default {
        props: ['messages','currentuserid']
    };


</script>

<style scoped>
.classForAuthorSameAsUser {
  color: red;
}
.classForAuthorDiffThanUser {
  color: blue;
}
</style>