[Vuejs]-How can I define a color for a user in a chat

by

0👍

✅

Assuming your User model has some sort of id, you could apply CSS classes or styles based on the id of the author of the message.
It could be something like this

<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>

Leave a comment