Javascript 引导Vue b-toast不会再次触发

我有一系列的事件消息，我想一次显示一条，作为弹出消息，不会对我的web应用程序中正在进行的其他事情造成太多干扰

我发现了一个很好的带有引导Vue b-toast的组件

toast显示第一个数组元素，然后，当检测到toast“hidden”事件时，数组被“移位”以删除第一个事件消息。 然后，它应该使用新的第一个数组元素重新显示toast

然而，第二个祝酒词被忽略了

我一直在处理一个简单的案例：

<div>
  <button v-on:click="displayEvents">Display events</button>
  <b-toast id="event-toast" static no-close-button auto-hide-delay="2000">
    {{ events[0] }}
  </b-toast>
</div>

{
  data() {
    return {
      events: []
    }
  },
  methods: {
    displayEvents() {
      this.events.push("Event 1");
      this.events.push("Event 2");
      if (this.events.length >= 1) {
        console.log('Show 1st toast - events now: ' + this.events);
        this.$bvToast.show('event-toast');
        // this.$root.$emit('bv::show::toast','event-toast')
      }
      this.$root.$on('bv::toast:hidden', bvEvent => {
        if (bvEvent.componentId == 'event-toast') {
          this.events.shift();  // Remove first element as it has now expired
          console.log('removed first element - events now: ' + this.events);
          if (this.events.length > 0) {
            console.log('Display next event');
            this.$nextTick(() => { 
              this.$bvToast.show('event-toast');
            })
            // this.$root.$emit('bv::show::toast','event-toast') 
          }
        }
      });
    }
  }
}

显示事件
{{事件[0]}
{
数据（）{
返回{
事件：[]
}
},
方法：{
displayEvents（）{
本次事件推送（“事件1”）；
此事件推送（“事件2”）；
如果（this.events.length>=1）{
log（'Show first toast-events now:'+this.events）；
这是。$bvToast.show（'event-toast'）；
//此.$root.$emit（'bv:：show:：toast'，'event-toast'）
}
this.$root.$on（'bv:：toast:hidden'，bvEvent=>{
if（bvEvent.componentId=='event toast'）{
this.events.shift（）；//删除第一个元素，因为它现在已过期
log（'删除了第一个元素-现在的事件：'+this.events）；
如果（this.events.length>0）{
log（“显示下一个事件”）；
这个.$nextTick（（）=>{
这是。$bvToast.show（'event-toast'）；
})
//此.$root.$emit（'bv:：show:：toast'，'event-toast'）
}
}
});
}
}
}

控制台日志记录表明它正在命中正确的代码来触发toast，它使用相同的方法来第二次触发toast，而这是第一次

我还尝试了触发祝酒的“发射”方法（目前已被注释掉）

你知道问题出在哪里吗？我是否在编码中出错，或者在引导Vue中发现错误

---

提前谢谢

有两个问题<代码>显示事件在每次运行时注册另一个事件侦听器。这只需要执行一次，因此将侦听器注册移动到，例如，创建的

：

created（）{
this.$root.$on（'bv:：toast:hidden'，bvEvent=>{
// ...
});
}

我相信当发出第二个事件时，存在一个竞争条件，其中DOM更改仍然从第一个事件传播（即，在本例中是隐藏的）

试试这个：

if（this.events.length>0）{
log（'显示下一个事件：'）；
这个.$nextTick（（）=>{
这是。$bvToast.show（'event-toast'）；
})
}

nextTick

将回调延迟到下一个DOM更新周期之后。Vue提供了以下提示：

在更改某些数据以等待DOM更新后立即使用它

现在它工作得很好：-）我没有把它看作只需要创建一次的“持久”事件侦听器，所以这是关键。再次感谢你的帮助！