使用bootstrap-vue时<b-modal>显示为文本

Question

我正在构建模态，以便从表中编辑对象，但是在调用示例模态时，它显示为文本。如下图所示：

这是代码示例：

    <!-- Using value -->
    <b-button v-b-modal="'my-modal'">Show Modal</b-button>

    <!-- The modal -->
    <b-modal id="my-modal">Hello From My Modal!</b-modal>

这很奇怪，因为v-for和v-model正常工作，但是<b-alert>和<b-modal>却不正常。

Answer 1

确保已导入v-b-modal指令。这是工作代码：

<template>
    <div>
        <!-- Using value -->
        <b-button v-b-modal="'my-modal'">Show Modal</b-button>

        <!-- The modal -->
        <b-modal id="my-modal">Hello From My Modal!</b-modal>
    </div>
</template>

<script>
    import { BButton, BModal, VBModal } from "bootstrap-vue";

    export default {
        components: {
            BButton,
            BModal
        },

        directives: { 
            'b-modal': VBModal 
        },
    }
</script>