vue2.jsでフラッシュメッセージが消えない場合があります

Question

私はちょうどeventBusからのフラッシュメッセージを受信して​​から消える前に3秒間フラッシュメッセージを表示するフラッシュメッセージコンポーネントを作成しました。次のようにコンポーネントは次のとおりです。

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

コンポーネントは、フラッシュメッセージがその後トリガーされるか、私はルート（VueRouter）を変更した場合、その後のフラッシュメッセージが消えないただし場合、最初のフラッシュメッセージのために完璧に動作します。私はこれがjavascriptが再トリガされていることを前提としています。これはsetTimeoutの効果を無効にしますが、これをVueでどのように修正するかはわかりません。

Answer 1

私は、Belmin Bedakの助けを借りてバグを修正することができました。マウントサイクルが更新されるたびにマウントが再トリガされるため、次にmount（）の代わりにcreated（）を使用して実装されています。 Created（）は一度リスナーを設定し、watchは可視が変更されたかどうかを確認するために使用されます（新しいイベントがリスナーにプッシュされたときに発生します）。 visibleが変更された場合、setTimeoutは正しくトリガされます。

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