Vue.js flash消息有时不会在vue2.js中消失

我刚刚制作了一个flash message组件，它从eventBus接收flash消息，然后在消失之前显示flash消息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>

{{message}}
。淡入激活状态。淡入保持激活状态{
过渡：不透明度
}
.淡入淡出淡出淡出{
不透明度：0
}
从“../../config/EventBus”导入EventBus；
导出默认值{
名称：'flash view'，
数据（）{
返回{
类型：“”，
消息：“”，
可见：假，
};
},
安装的（）{
EventBus.subscribeFlashMessage（data=>this.setData（data））；
设置超时（（）=>(
this.visible=false
), 3000);
},
方法：{
setData（数据）{
this.setType（data.type）；
this.message=data.message；
可见=真实；
},
设置类型（类型）{
this.type=`alert-alert-${type}`；
},
},
};

---

该组件对于第一条flash消息非常有效，但是如果随后触发了flash消息，或者如果我更改了路由（VueRouter），则flash消息不会消失。我猜想这是因为javascript被重新触发，这会使setTimeout的效果无效，但是我不知道如何在Vue中修复此问题。

多亏了Belmin Bedak的帮助，我成功地修复了此错误。现在使用created（）而不是mounted（）实现以下内容，因为每个更新周期都会重新触发mounted。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>

。淡入激活状态。淡入保持激活状态{
过渡：不透明度
}
.淡入淡出淡出淡出{
不透明度：0
}
导出默认值{
名称：'flash view'，
数据（）{
返回{
类型：“”，
消息：“”，
可见：假，
};
},
创建（）{
this.on（'flashMessage'，data=>this.setData（data））；
},
方法：{
setData（数据）{
this.type=`alert-alert-${data.type}`；
this.message=data.message；
可见=真实；
},
setFadeOut（）{
设置超时（（）=>(
this.visible=false
), 2500);
},
},
观察：{
可见：“setFadeOut”，
},
};

我不完全理解这里的问题，但是为什么您要在

mounted（）

hook中等待3秒钟，然后触发更改？还考虑使用<代码> V-Studio指令检查可见状态，而不是<代码> V-I/Eng> >我等待三秒，然后使消息不可见。仔细想想，mounted（）可能不是定义此警报的合适位置。我认为这会让您遇到问题，您应该在方法中使用setTimeout，而不是在

mounted（）

hook中触发此警报。这里解释了VueJS中的挂钩，谢谢，这就成功了！：D