(Question) How can i use modal? about bootstrap-vue HOT 10 CLOSED

@ethanclevenger91 Hello Ethan, do you have any news on the modal implementation? I'm currently fiddling around a bit with Vue + Bootstrap and would like to use the Modal component. What I noticed, is that the CSS class "show" is not set. Instead, a CSS class "in" is set. Hope this helps.

from bootstrap-vue.

@ethanclevenger91 I've provided a PR #81 to address this issue. Please have a look.

from bootstrap-vue.

from bootstrap-vue.

I got it to work using the following code:

<template>
<div id="app">
        <b-button @click="toggleModal">
            Click Me!
        </b-button>
    <b-modal ref="modal">
        <div slot="modal-body" class="modal-body">...</div>
    </b-modal>
</div>
</template>

<script>
export default {
    mounted() {
        console.log('welcome!')
    },
    methods: {
        toggleModal() {
            this.$refs.modal.show();
        }
    }
}
</script>

from bootstrap-vue.

@jgog @ethanclevenger91 Thanks a lot!
this project is awesome <3

from bootstrap-vue.

Got worked by changing modal's created method to:

 created() {
        const hub = this.$root;
        hub.$on('show::modal', id => id === this.id && this.show()).bind(this);
        hub.$on('hide::modal', id => id === this.id && this.hide()).bing(this);
    },

and the emitter method of opener:

    openObjects() {
                this.$root.$emit('show::modal', 'modaldlg');
            }

from bootstrap-vue.

@mosinve Looks like a typo in the second bind line:

...hide()).bing(this)

probably should be

...hide()).bind(this)

from bootstrap-vue.

Thanks @riker09 for mentioning that. I'm working on modal so it may be my mistake. It will be all better soon :)

from bootstrap-vue.

Yep, thanks @riker09 - it was my typo. In working app all correct and works

from bootstrap-vue.

Seems, that impossible to use modal in "Option 2: import individual components".

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
(found in at D:\Dev\reestrius_spa\node_modules\bootstrap-vue\components\modal.vue)

from bootstrap-vue.