[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>

所以我不確定為什么我會收到這個警告。 如果我用 b-popover.hover 替換 vb-popover.hover 這個警告消失但功能不存在。

基本上試圖從文檔中實現popover指令： https://bootstrap-vue.org/docs/directives/popover

Answer 1

指令 ID 自動以v-為前綴。 您可能應該明確設置指令 ID，如此處所示

directives: {
  'b-popover': VBPopover
}

---

發生的事情是

directives: {
  VBPopover 
}

是相同的

directives: {
  VBPopover: VBPopover
}

並且名稱VBPopover被轉換為vb-popover ，然后應用自動前綴成為vvb-popover 。 所以你可以在你的模板中使用它，但對我來說，它看起來很傻。

當涉及到它們的名稱時，指令的行為不像組件。 指令名稱始終轉換為kebab-case並以v-為前綴。