为什么波普尔抛出错误波普尔：在 vuejs 中提供的引用或波普尔参数无效"

Question

我在vue.js 2.6中编写了使用Propper.js.的组件

组件是一个通用的popover组件，用于在页面上的元素中显示过滤器和菜单等内容。

对于将数据传递到Popover函数，我使用的是refs，也许是这种情况？

控制台抛出错误并说。

Popper：提供的引用或Popper参数无效。它们必须是DOM元素或虚拟元素。

<template>
<div>
<div ref="popcorn" aria-describedby="tooltip">
<slot name="action" :toggle="toggle" :close="close"></slot>
</div>
<div ref="tooltip" role="tooltip" v-if="isOpen">
<div :class="[ci-popover, `ci-popover--background-color-${variant}`,`ci-divider--padding-${padding}`]">
<slot name="default" />
{{placement}}
</div>
</div>
</div>
</template>
<script lang="ts">
import { Vue, Component, Prop, Emit } from "vue-property-decorator";
import { oneOfOptions } from "../../helpers/PropertyValidators";
import { CiPopoverBackgroundColor, ciPopoverBackgroundColorArray } from './popover-background-color';
import { CiPopoverPlacement, ciPopoverPlacementArray } from './popover-placement';
import { CiSpacing, CiSpacingArray } from '../component-spacing';
import { createPopper, Instance, VirtualElement } from '@popperjs/core';
@Component
export default class CiPopover extends Vue {
$refs!: {
popcorn: Element,
tooltip: HTMLElement
}
/*Props/*

created() {
this.onOpen();
}
beforeDestroy() {
this.onClose();
}
public close(): void {
console.log('close method');
console.log(this.$refs.tooltip);
console.log(typeof this.$refs.tooltip);
}
public toggle(): void {
console.log('toggle method');
this.isOpen = true;
console.log(this.$refs.popcorn);
console.log(typeof this.$refs.popcorn);
}
@Emit('open')
onOpen() {
console.log("emit:open")
}
@Emit('close')
onClose() {
console.log("emit:close");
}
popperInstance = null as Instance | null
isOpen = false;
mounted() {
this.popperInstance = createPopper(this.$refs.popcorn , this.$refs.tooltip, {
placement: 'top'
});  
}
}
</script>

问题是如何解决这个问题？

Answer 1

因为工具提示元素没有呈现，所以您没有引用任何内容。

您的工具提示元素看起来像：

<div ref="tooltip" role="tooltip" v-if="isOpen">
<div :class="[ci-popover, `ci-popover--background-color-${variant}`,`ci-divider--padding-${padding}`]">
<slot name="default" />
{{placement}}
</div>
</div>

它取决于状态isOpen(如果应该渲染(，并且以false作为值开始，如中所示

isOpen = false

在挂载时，您立即createPopper，但尚未打开工具提示。