[Vuejs]-Flash message sometimes does not disappear in vue2.js

by

0👍

✅

I have managed to fix the bug, thanks to Belmin Bedak’s help. The following is now implemented with created() instead of mounted(), as mounted gets retriggered for every update cycle. Created() sets the listener once, and watch is used to check if the visible has been changed (this happens when a new event is pushed to the listener). If the visible is changed, the setTimeout gets triggered properly. 

<template>
  <transition name="fade">
    <div
      v-if="visible"
      v-bind:class="type"
      role="alert"
      v-text="message"
    >
    </div>
  </transition>
</template>

<style scoped>
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s
  }
  .fade-enter, .fade-leave-to {
    opacity: 0
  }
</style>

<script>
  export default {
    name: 'flash-view',
    data() {
      return {
        type: '',
        message: '',
        visible: false,
      };
    },
    created() {
      this.$on('flashMessage', data => this.setData(data));
    },
    methods: {
      setData(data) {
        this.type = `alert alert-${data.type}`;
        this.message = data.message;
        this.visible = true;
      },
      setFadeOut() {
        setTimeout(() => (
          this.visible = false
        ), 2500);
      },
    },
    watch: {
      visible: 'setFadeOut',
    },
  };
</script>

Leave a comment