CODEWITHSUNDEEP
javascriptvue.jsvuejs2modal-dialog
Kenneth_H
Kenneth_H

Reputation: 141

vue-js-modal dialog does not close

I do not know if this is problem of just something missing from the documentation or me who is misunderstanding how the vue-js-modal package works. I cannot seem to get the dialog modals to close

Example & screenshots:

I have created this modal dialog:

delete_entry_modal(item) {
    this.$modal.show('dialog', {
        title: 'Delete entry?',
        text: `Are you sure that you want to delete the ${item.listing_type} entry from ${item.from_address} to ${item.to_address }@${item.to_domain}?`,
        buttons: [
            {
                title: 'Yes',
                handler: () => {
                    this.setLoading(true);
                    axios.delete('/api/lists/'+item.id+'/').then(response => {
                        this.setLoading(false);
                        this.notify(this.createNotification('Entry deleted', `The ${item.listing_type} entry from ${item.from_address} to ${item.to_address }@${item.to_domain} has been deleted`, 'success'));
                    }).catch(error => {
                        this.setLoading(false);
                        this.notify(this.createNotification('An error occurred', `${error}`, 'error'));
                    });
                    this.$emit('close');
                },
                default: true
            },
            {
                title: 'No'
            }
        ]
    })
}

I load in the VModal this way:

Vue.use(VModal, { dialog: true, dynamic: true, injectModalsContainer: true });

When I click the "No" button, the modal closes. If I click "Yes", it runs the handler code, but it does not close the modal. Pressing Enter on the keyboard yields the same result

Upvotes: 1

Views: 1652

Answers (1)

Ohgodwhy
Ohgodwhy

Reputation: 50787

$emit works in the scope of the template by broadcasting to the parent. Because you're not using a template, you will need to explicitly define the the modal to be closed within the syntax by attaching to the VueConstructor 

this.$modal.hide('dialog')

Upvotes: 2

Related Questions