0

I'm building a modal, to edit an object from a table, but when calling a example modal, it's showing as a text. As in this image bellow:

enter image description here

Here is the code example: 

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

This is strange, because v-for and v-model are working normaly, but <b-alert> and <b-modal> aren't.

M. Alves
  • 35
  • 1
  • 6

1 Answers1

2

Make sure you've imported the v-b-modal directive. Here's the working code:

<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>
GabWas
  • 15
  • 1
  • 2
rcbgalido
  • 526
  • 3
  • 11
  • I'm getting this error, with or withouth it: "vue.js:616 [Vue warn]: Failed to resolve directive: b-modal" – M. Alves Dec 23 '19 at 00:40
  • 1
    As mentioned by Hiws, make sure you imported the javascript file. For more information [link](https://bootstrap-vue.js.org/docs/#browser) – rcbgalido Dec 23 '19 at 00:59