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"
                            :style="(item.sender_user_id == user_id) ? '' : 'float:right'  "
                        >
                            <span
                                v-if="item.sender_user_id == user_id"
                                class="Chat White"
                            >{{ item.text }}</span>
                            <span v-else class="Chat Cyan">{{ item.text }}</span>
                        </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;
    color: white;
    border-radius: 10px;
}
.Chat.Cyan {
    background: cornflowerblue;
    box-shadow: 5px 15px 20px rgba(0, 0, 0, 0.2);
}
.Chat.White {
    background: #fff;
    color: black;
    box-shadow: 5px 15px 20px rgba(0, 0, 0, 0.2);
}
</style>