Flash-Nachricht verschwindet manchmal nicht in vue2.js

Question

Ich habe gerade eine Flash-Nachricht Komponente gemacht, die Flash-Nachrichten von der EventBus empfängt und zeigt dann die Flash-Nachricht für 3 Sekunden vor dem Verschwinden. Die Komponente ist wie folgt:

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

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

<script> 
    import EventBus from '../../config/EventBus'; 

    export default { 
    name: 'flash-view', 
    data() { 
     return { 
     type: '', 
     message: '', 
     visible: false, 
     }; 
    }, 
    mounted() { 
     EventBus.subscribeFlashMessage(data => this.setData(data)); 
     setTimeout(() => (
     this.visible = false 
    ), 3000); 
    }, 
    methods: { 
     setData(data) { 
     this.setType(data.type); 
     this.message = data.message; 
     this.visible = true; 
     }, 
     setType(type) { 
     this.type = `alert alert-${type}`; 
     }, 
    }, 
    }; 
</script> 

Die Komponente perfekt für die erste Flash-Mitteilung funktioniert, aber wenn Flash-Mitteilungen anschließend ausgelöst werden oder wenn ich Routen ändern (VueRouter), dann die Flash-Nachricht nicht verschwindet. Ich nehme an, dass das ist, weil Javascript retriggered ist, das den Effekt von setTimeout nulliert, jedoch habe ich keine Idee, wie man das in Vue repariert.

Answer 1

Ich habe es geschafft, den Fehler zu beheben, dank Belmin Bedaks Hilfe. Das Folgende wird nun mit created() anstelle von mounted() implementiert, da mounted für jeden Aktualisierungszyklus erneut ausgelöst wird. Created() setzt den Listener einmal, und watch wird verwendet, um zu überprüfen, ob das Sichtbare geändert wurde (dies passiert, wenn ein neues Ereignis an den Listener gesendet wird). Wenn das Sichtbare geändert wird, wird setTimeout ordnungsgemäß ausgelöst.

<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>