javascript - Bootstrap Vue b-toast 不会再次触发

Question

我有一系列事件消息，我想一次显示一个作为弹出消息，这些消息不会过多地干扰我的网络应用程序中发生的其他事情。
我用 Bootstrap Vue b-toast 找到了一个不错的组件。
Toast 显示第一个数组元素，然后，当检测到 toast 的“隐藏”事件时，数组将“移位”以删除第一个事件消息。
然后它应该使用新的第一个数组元素重新显示 toast。
然而，显示 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') 
          }
        }
      });
    }
  }
}

控制台日志表明它正在点击正确的代码来触发 toast，它使用相同的方法第二次触发它，这是第一次工作。
我还尝试了触发 toasts 的“emit”方法(目前已注释掉)。
任何想法可能是什么问题？我是在编码中犯了错误，还是在 Bootstrap Vue 中发现了错误？
提前致谢!

Answer 1

有两个问题。 displayEvents每次运行时都会注册另一个事件监听器。这只需要做一次，因此将监听器注册移动到例如 created :

created() {
   this.$root.$on('bv::toast:hidden', bvEvent => {
   // ...
   });
}

我相信在发出第二个事件时存在竞争条件，其中 DOM 更改仍在从第一个事件传播(即隐藏，在这种情况下)。
尝试这个:

if (this.events.length > 0) {
   console.log('Display next event:');
   this.$nextTick(() => {
      this.$bvToast.show('event-toast');
   })
}

nextTick将回调推迟到下一个 DOM 更新周期之后。 Vue API doc给出了这个提示:

Use it immediately after you’ve changed some data to wait for the DOM update.