如何在聊天中為用戶定義顏色

Question

我和推送器聊天，它運行良好，但現在我想在你說話時改變你自己用戶名的顏色。 目前，我的用戶名和其他用戶的用戶名是黑色的，但我希望用另一種顏色的用戶名來知道你在說話的時間。 （我的英語有點中等對不起，請問您是否需要更多解釋）Thanx幫忙

這是在我的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 ，您可以根據消息作者的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>