javascript - [Vue警告] : Failed to resolve directive: b-popover

Question

<template>
  <div>
    <div class="text-center my-3">
      <b-button
        v-b-popover.hover="'I am popover content!'"
        title="Popover Title"
        >Hover Me</b-button
      >
    </div>
  </div>
</template>

<script>
import { VBPopover } from "bootstrap-vue";
export default{
  directives: {
    VBPopover
  },
}
<script>

所以我不确定为什么我会收到这个警告。如果我用 b-popover.hover 替换 v-b-popover.hover 这个警告消失但功能不存在。
基本上试图实现文档中的 popover 指令: https://bootstrap-vue.org/docs/directives/popover

Answer 1

指令 ID 自动以 v- 为前缀.您可能应该显式设置指令 ID，如 here 所示。

directives: {
  'b-popover': VBPopover
}

发生的事情是

directives: {
  VBPopover 
}

是相同的

directives: {
  VBPopover: VBPopover
}

和名称 VBPopover已转换为 v-b-popover然后将自动前缀应用为 v-v-b-popover .所以你可以在你的模板中使用它，但对我来说，它看起来很傻。
当涉及到它们的名称时，指令的行为不像组件。指令名称始终转换为 kebab-case 并以 v- 为前缀.