为什么 Popper 在 vuejs 中抛出错误 Popper: Invalid reference or popper argument provided”

Question

我已经在vue.js 2.6中写了组件Propper.js。

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

为了将数据传递到 Popover 函数，我正在使用 refs，也许是这种情况？

控制台抛出错误并说。

Popper: Invalid reference or popper argument provided. They must be either a DOM element or virtual element.

<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但您还没有打开工具提示。

为什么 Popper 在 vuejs 中抛出错误 Popper: Invalid reference or popper argument provided”

Why Popper throws error Popper: Invalid reference or popper argument provided" in vuejs

typescript

vue.js

vuetify.js