(Question) How can i use modal?

[marklofff]

Hi, How can i use modal?

[ethanclevenger91]

It's not completely implemented yet, there seems to be a small bug. I was hoping to put in a PR sooner than later

…

On Fri, Jan 6, 2017, 3:44 PM Marcelo ***@***.***> wrote: Hi, How can i use modal? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#63>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACgIntm_MFUFgbmBWb3nPRwkM6TLoCs_ks5rPtHPgaJpZM4LdOzC> .

[jenil]

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>

[marklofff]

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

[riker09]

@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.

[riker09]

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

[mosinve]

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');
            }

[riker09]

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

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

probably should be

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

[pi0]

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

[mosinve]

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

[mosinve]

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)