<template>
    <div class="notifications">

<b-alert v-for="notification in notifications" :key="notification.id"
      :show="notification.timeout"
      dismissible
      fade
      :variant="notification.type"
    @dismissed="countDownChanged(notification.id)"
    
    >
      {{notification.message}}
    </b-alert>
 
    </div>
</template>

<script>
export default {
   

    methods:{
countDownChanged(notificationId) {
      this.$store.commit('removeNotification',notificationId);
       this.$forceUpdate();
      },
    },
    computed:{
        notifications()  {
            return this.$store.getters.notifications;
        }
    }
}
</script>

<style lang="scss" scoped>
.notifications{
    z-index: 999;
    position: absolute;
    right: 5px;
    top: 5px;
}
</style>