vuejs-dialog: Dialog never enter the confirm method

Hi,

We’re having issues with your plugin. We’re using it with the <script> include and, following the documentation, we declare

window.Vue.use(VuejsDialog.default);

Here is our code

this.$dialog.confirm('Confirm delete', {
                loader: true,
                okText: 'Yes',
                cancelText: 'No'
            })
                .then(function (dialog) {
                    console.log('confirm');
                    dialog.close();
                });

The code never enters the then function and it throws a message in the console :

Possible Unhandled Promise Rejection: undefined

We tried without the loader, same error.

Thanks 😃

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 20 (10 by maintainers)

Most upvoted comments

@Godofbrowser Got it, had to go the v-confirm way to get it working.

                               <button 
                                class="btn btn-danger btn-sm"
                                v-confirm="{
                                    loader: true,
                                    ok: dialog => removeMenuItem(dialog, item['.key']),
                                    cancel: doNothing,
                                    message: 'Are you sure you want to delete?'
                                }"
                                >X</button>

        removeMenuItem(dialog, key) {
            dbMenuRef.child(key).remove()
                .then((error) => {
                    dialog.close()
                    console.log("Remove succeeded")
                })
                .catch((error) => {
                    console.log("Remove failed: " + error.message)
                })
        },

danchann on Jun 18, 2018

Got the following errors:

Remove failed: dialog.close is not a function
Remove failed: Cannot read property ‘$dialog’ of undefined

methods: {
        removeMenuItem(key) {
            this.$dialog.confirm('Are you sure you want to delete?')
            .then(function(dialog) {
                dbMenuRef.child(key).remove()
                    .then(function(error) {
                        this.$dialog.close()
                        console.log("Remove succeeded")
                    })
                    .catch(function(error){
                        console.log("Remove failed: " + error.message)
                    })
                // this.getMenuItems.splice(this.getMenuItems.indexOf(item), 1);
                console.log(' Clicked on continue')
                // this.$dialog.close()
            })
            .catch(function (error) {
                console.log(`Clicked on cancel ${error}`)
            });
        },

have already tried your above syntax as well.l

danchann on Jun 18, 2018

If I do a delete from the firebase database, the delete goes through but the dialog box won’t close and the buttons don’t work, I’ll have to do a page refresh to get rid of it. If I do a local splice (the commented line) it worked fine. Any ideas?

import VuejsDialog from "vuejs-dialog"
Vue.use(VuejsDialog)

methods: {
        removeMenuItem(key) {
            this.$dialog.confirm('Are you sure you want to delete?')
            .then(function(dialog) {
                dbMenuRef.child(key).remove()
                // this.getMenuItems.splice(this.getMenuItems.indexOf(item), 1);
                console.log(' Clicked on continue')
            })
            .catch(function (error) {
                console.log(`Clicked on cancel ${error}`)
            });
        },

danchann on Jun 18, 2018

I just did a quick test and can’t seem to reproduce the issue.

<!DOCTYPE html>
<html>
<head>
	<title>Vuejs dialog Demo</title>
	<script type="text/javascript" src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>
	<script type="text/javascript" src="https://unpkg.com/vuejs-dialog@0.4.7/dist/vuejs-dialog.min.js"></script>
</head>
<body>
<div id="app">
	<button @click="click">click</button>
</div>

<script type="text/javascript">
	window.Vue.use(VuejsDialog.default);

	new Vue({
		el: "#app",
		methods: {
			click(){
				this.$dialog.confirm('Confirm delete', {
	                loader: true,
	                okText: 'Yes',
	                cancelText: 'No'
	            })
                .then(function (dialog) {
                    console.log('confirm');
                    dialog.close();
                }).catch(err => {
                     console.debug(err.toString()); // Detailed error message
                });
			}
		}
	})
</script>

</body>
</html>

Godofbrowser on Jan 19, 2018