為什么 Popper 在 vuejs 中拋出錯誤 Popper: Invalid reference or popper argument provided"

Question

我在 vue.js 2.6 中編寫了使用 Propper.js 的組件。

組件是通用的彈出框組件，用於在頁面上的元素中顯示過濾器和菜單等內容。

為了將數據傳遞到 Popover function 我正在使用 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>

它取決於 state isOpen是否應該呈現它，並且您從false作為值開始，如下所示：

isOpen = false

安裝后，您會立即createPopper ，但尚未打開工具提示。