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

Posted 2023-02-22

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

【英文标题】：[BootstrapVue warn]: popover - Unable to find target element in document

【发布时间】：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, 后面不应该有逗号

【参考方案1】：

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

【讨论】：

组件放在后面，我不能把所有东西都放在一个组件中，因为我有很多弹出框，而且会很多行。

@Beusebiu 在您的示例代码中，<popover /> 元素放置在该目标之前

@Hiws，对不起，我试过，把它放在前后，但结果一样。

【参考方案2】：

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

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