<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>
So I am not sure why I am getting this warning. If I replace vb-popover.hover with b-popover.hover this warning goes away but the functionality is not there.
Basically trying to implement the popover directive from the docs: https://bootstrap-vue.org/docs/directives/popover
Directive IDs are automatically prefixed with v-
. You should probably explicitly set the directive ID as indicated here
directives: {
'b-popover': VBPopover
}
What was happening is that
directives: {
VBPopover
}
is the same as
directives: {
VBPopover: VBPopover
}
and the name VBPopover
was transformed to vb-popover
and then had the automatic prefix applied to become vvb-popover
. So you could use that in your template but to me, it looks pretty silly.
Directives don't behave like components when it comes to their names. Directive names are always transformed to kebab-case and prefix with v-
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.