[BootstrapVue 警告]：弹出框 - 无法在文档中找到目标元素答案

【问题标题】：[BootstrapVue warn]: popover - Unable to find target element in document[BootstrapVue 警告]：弹出框 - 无法在文档中找到目标元素
【发布时间】：2020-06-11 10:20:46
【问题描述】：

我正在使用 Bootstrap-Vue 的弹出窗口，但出现此错误：

[BootstrapVue 警告]：弹出框 - 无法在其中找到目标元素文件。

一切正常，但我有很多警告，我想修复它们。

父组件

<template>
    <popover />
    
    <label id="popover-target-EXAMPLE">
          <i class="far fa-question-circle"></i> Parish
    </label>
</template>

<script>
    import Popover from './Popover';
    export default {
        components:{
            Popover,
        }
    }
</script>

我的弹出框子组件

<template>
    <div>
        <b-popover target="popover-target-EXAMPLE" variant="primary" triggers="hover" placement="top">
            <p class="popover-style">TEXT</p>
        </b-popover>
        //here are multiple <b-popover>....
    </div>
<template>

【问题讨论】：

你在脚本中引用了popover吗？
是的，我导入它，并在组件中添加它。
你能把代码贴在你引用的地方吗？
我更新了代码。
popover 文件是 .vue 吗？如果是这样，将其更改为from './Popover.vue'; 并确保文件路径正确。从语义上讲，Popover, 后面不应该有逗号

标签： vue.js vuejs2 bootstrap-vue

【解决方案1】：

尝试将popover组件放在目标元素之后

【讨论】：

组件放在后面，我不能把所有东西都放在一个组件中，因为我有很多弹出框，而且会很多行。
@Beusebiu 在您的示例代码中，<popover /> 元素放置在该目标之前
@Hiws，对不起，我试过，把它放在前后，但结果一样。

【解决方案2】：

一段时间后，我发现了问题。在那个 Popover 孩子中，我有多个弹出框，其中一些不在父组件中。

为了修复警告，我删除了所有在父组件中没有 ID 的 <b-popover>。

【讨论】：