BootstrapVue Popover：奇怪的反应行为

Question

我有一个与此类似的 Vue 模板代码：

<b-button id="button" @click="editingComment=true">
  Click me
</b-button>

<b-popover target="button">
  <template #title>
    <div>Comment is beeing<span v-if="editingComment"> {{ true ? 'edited' : 'created' }}</span></div>
  </template>
  <div id="content">
    Content
  </div>
</b-popover>

取决于看似无关的“条件”，标题是否正确呈现。

我编写了一个脚本，每两秒更改一次

editingComment

的状态。如果我将另一个看似无关的弹出窗口的标题取决于

editingComment

，则两个弹出窗口都会根据

editingComment

不断更改其标题。否则，给定弹出窗口的标题不会更改。

造成这种行为的原因是什么？迁移到Vue3兼容版本后出现问题

查看此处，查看显示非反应性的示例。

Answer 1

根据 Estus Flask 的评论，BootstrapVue 在内部处理插槽 vnode 的方式存在错误。

一个快速的解决方法是使用 Vue 的 $forceUpdate() 方法。

因此，可以添加对组件的引用并强制更新变量更改：

<b-popover ref="popover" target="button">

watch: {
     'editingComment'() {
         this.$refs.popover.$forceUpdate();
    }
}