<template>
    <div  class="alert alert-danger" role="alert" v-if="errorList.length">
        <ul>
            <li v-for="(error, indexError) in _errorList" :key="indexError">{{error}}</li>
        </ul>
    </div>
</template>
<script lang="ts">
export default {
    name: 'DisplayErrors',
    data: () => {
        return {
            _errorList: [],
        }
    },
    props: {
        errorList: [],
    },
    watch: {
        errorList: function(newValue) {
            this._errorList = [];
            newValue.forEach(error => {
                console.log(error);
                if(Array.isArray(error.$message)) {
                    error.$message.forEach(errorItem => {
                        errorItem.forEach(errorMessage => {
                            this._errorList.push(errorMessage);
                        });
                    });
                }else{
                    this._errorList.push(error.$message);
                }
            });
        },
    },
}
</script>
