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

Question

我正在构建一个模态，以编辑来自 table 的对象，但是在调用示例模态时，它显示为文本。如下图所示：

这是代码示例：

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

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

<b-modal> is showing as text when using bootstrap-vue

bootstrap-modal

vue.js

bootstrap-4

bootstrap-vue