为什么Popper抛出错误Popper:在vuejs中提供的无效引用或popper参数

Question

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

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

为了将数据传递到Popover函数中，我使用的是参考文献，也许这就是情况？

控制台抛出错误并说。

波普尔:提供了无效的引用或波普尔参数。它们必须是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，并以false作为值开始，如下所示：

isOpen = false

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