Bootstrap vue b-toast不会触发第二次

Question

我有一组事件消息，我想一次显示一个弹出消息，这样不会过多干扰我的网络应用程序中发生的其他事情。

我用 Bootstrap Vue b-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，它使用相同的方法第二次触发它，这是第一次工作。

我也试过触发吐司的“发出”方法（目前已注释掉）。

知道问题出在哪里吗？我是否在编码中犯了错误，或者我在 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.

Bootstrap vue b-toast不会触发第二次

Bootstrap Vue b-toast will not trigger a second time

javascript

vue.js

bootstrap-vue