[Vue 警告]：无法解析指令：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>

所以我不确定为什么会收到此警告。如果我将 v-b-popover.hover 替换为 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-.

[Vue 警告]：无法解析指令：b-popover

[Vue warn]: Failed to resolve directive: b-popover

javascript

vue.js

vue-directives