<template>
    <div class="Dialog">
        <div v-for="(Dialog, Index) in DialogMap" v-bind:class="Dialog.Type">
            {{ Dialog.Message }}<span class="Close" @click="Remove(Index)">×</span>
        </div>
    </div>
</template>

<script setup>
    import * as Vue from 'vue';

    const DialogMap = Vue.reactive(
    [
        { Message: 'You Have Been Logged In', Type: 'Success' },
        { Message: 'Bar2', Type: 'Info' },
        { Message: 'Bar3', Type: 'Warning' },
        { Message: 'You Have Been Logged In', Type: 'Success' },
        { Message: 'Bar2', Type: 'Info' },
        { Message: 'Bar3', Type: 'Warning' },
    ]);

    function Add(Message, Type)
    {
        DialogMap.push({ Message, Type });
    }

    function Remove(Index)
    {
        DialogMap.splice(Index, 1);
    }
</script>

<template>
    <div class="Dialog">
        <div v-for="(Dialog, Index) in DialogMap" v-bind:class="Dialog.Type">
            {{ Dialog.Message }}<span class="Close" @click="Remove(Index)">×</span>
        </div>
    </div>
</template>

<script setup>
    import * as Vue from 'vue';

    const DialogMap = Vue.reactive(
    [
        { Message: 'You Have Been Logged In', Type: 'Success' },
        { Message: 'Bar2', Type: 'Info' },
        { Message: 'Bar3', Type: 'Warning' },
        { Message: 'You Have Been Logged In', Type: 'Success' },
        { Message: 'Bar2', Type: 'Info' },
        { Message: 'Bar3', Type: 'Warning' },
    ]);

    function Add(Message, Type)
    {
        DialogMap.push({ Message, Type });
    }

    function Remove(Index)
    {
        DialogMap.splice(Index, 1);
    }
</script>