cssd-back/resources/js/vue/components/modal/ticket/ShowMessages.vue

<template>
    <div>
        <v-container>
            <material-card class color="black" title="Show Message" text max-width="600px">
                <v-layout row wrap>
                    <v-flex xs12>
                        <div
                            class="mx-2 my-3"
                            v-for="item in items"
                            :key="item.id"

                        >
                        <div class="Chat White" v-if="item.sender_user_id == user_id">
                            <span>{{ item.text }}</span>
                            <span class="caption"></span>
                        </div>
                        <div class="Chat Cyan" style="float:right" v-else>
                            <span  >{{ item.text }}</span>
                            <span class="caption"></span>
                        </div>
                        </div>
                    </v-flex>
                </v-layout>
                <ticket-send-message :user-id="user_id" />
            </material-card>
        </v-container>
    </div>
</template>
<script>
import { ApiService } from "@/services";
import { urls } from "@/config/urls";
import { mapGetters } from "vuex";
export default {
    data() {
        return {
            user_id: 0,
            items: {}
        }
    },
    created() {
        this.user_id = this.getModalProperties.user_id;
        this.load();
    },
    computed: {
        ...mapGetters("modal", ["getModalProperties"])
    },
    methods: {
        async load() {
            const result = await ApiService.get(
                urls.showMessages(this.user_id)
            );
            if (result && result.data.data) {
                this.items = result.data.data;
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.Chat {
    padding: 10px 15px;
    margin: 1% 0;
    color: white;
    border-radius: 10px;
    width: fit-content;
    display: block;
    box-shadow: 5px 15px 20px rgba(0, 0, 0, 0.2);
}
.Chat.Cyan {
    background: cornflowerblue;
    text-align: right;
    float: right;
    clear: right;
}
.Chat.White {
    background: #fff;
    color: black;
    float: left;
    clear: left;
}
</style>