How to pass to vue-js-modal dialog beforeOpen and beforeClose listeners?

user_4517646 0
Viewed 3380

For dialog window I used https://github.com/euvl/vue-js-modal. I need perform some code after closing dialog, so how can I pass beforeOpen and beforeClose listeners to dialog?

Changes:

I added @before-open="beforeOpen" @before-close="beforeClose" to <v-dialog> and listed them in methods section, but still doesn't work

index.html 

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>{%=o.htmlWebpackPlugin.options.title || 'Undefended'%}</title>
    </head>
    <body>
    <div id="app">
        <form id="form2" v-on:submit.prevent="login">
            <input type="email" v-model="signIn.email" placeholder="email@email.com">
            <input type="password" v-model="signIn.password" placeholder="Password">
            <input type="submit" value="Sign In">
        </form>

        <v-dialog @before-open="beforeOpen" @before-close="beforeClose"/>
    </div>
    <script src="/dist/build.js"></script>
    </body>
    </html>

main.js shorten version

import VModal from 'vue-js-modal'

Vue.use(VModal, {dialog: true});
new Vue({
    el: '#app',
    data: {
        signIn: {
            email: '',
            password: ''
        },
    },

    methods: {
        beforeOpen: function () {
            console.log("open")
        },
        beforeClose: function () {
            console.log("close")
        },

        login: function () {
            fireAuth.signInWithEmailAndPassword(this.signIn.email, this.signIn.password)
                .then((user) => {
                    if (!user.emailVerified) {
                        //-------------dialog-------------//
                        this.$modal.show('dialog', {
                            title: 'Alert!',
                            text: 'Please verify your email',
                            buttons: [{
                                title: 'Send verification email',
                                handler: () => {}
                            }, {title: 'Close'}]
                        });
                        //-------------dialog-------------//
                    }
                })
        }

    },
});

in this case nothing writes to the console

vuejs2 vue-component vue.js javascript
3 Answers
user_61764090

Thanks for using plugin.

v-dialog does not currently support listeners. It is a very thin wrapper for modal, more like example really. I think the solution for your problem will just to use modal directly with all its features.

user_91225900

You can set function in v-modal event:

<v-dialog @before-open="beforeOpen" @before-close="beforeClose"/>

And you define 2 methods:

methods: {
  beforeOpen() { console.log('open') },
  beforeClose() { console.log('close') }
}
user_53286830
Related