izyim/resources/assets/vue/components/order/elements/OrderHistoryComponenet.vue

<template>
    <div class="row">
        <div class="col p-l-0">
            <div class="row m-l-0 m-r-0 relative order-history" v-for="(detail, index) in this.order.details " :class="{'p-b-15': index !== 3}" v-if="index <= 3">
                <div class="absolute bullet-connector hint-text"></div>
                <div class="col" :class="[{'text-danger': detail.type === 0}, {'text-success': detail.type === 2}, {'bold': detail.type === 2}]">
                    <div class="row align-items-center justify-content-center fs-10">
                        <div class="col-auto p-r-10">
                            <div class="bg-master-light btn-rounded hint-text" style="width: 8px;height: 8px;" ></div>
                        </div>
                        <div class="col-auto hint-text p-l-0">
                            {{detail.date}}
                        </div>
                        <div class="col p-l-0 lh-20" v-html="detail.description"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            'data': {
                required: true
            }
        },
        data() {
            return {
                order: this.data,
            }
        },
        watch: {
            'data': function() {
                this.order = this.data;
            }
        },
    }
</script>