Vue-js-modal: How do I programmatically hide a dynamic modal?

[nlien]

Without a name (eg. this.$modal.hide('name')), how do I hide a dynamic modal, ref. the use of a modals-container?

It also seems that the name property is ignored when used like this:
this.$modal.show(SomeComponent, null, {name: 'myModal'})
Instead it receives a name like this: _dynamic-modal-1

If the name property was respected, I imagine we still could use the same functionality for hiding it programmatically:
this.$modal.hide('myModal')

[RenanOliv]

I found in the source of the <modals-container> a local key definition in the <modal> tag. I was able to programmatically close the modal by calling the $modal.hide() function and passing the key from the parent instance state:

this.$modal.hide(this.$parent.name)

I think would be nice to get the dynamic component name either as a namespaced prop or event. Maybe followed by a new option to avoid prop/event name collision.

[euvl]

Hey @nilen, dynamic modals are not there yet, i will release the new ver. tomorrow night. Soz for confusion.

[euvl]

@RenanOliv hey, good find. @NoelDeMartin did all the work, so he probably is more competent in discussing how this feature should work (i did nothing, lol).

[NoelDeMartin]

Yes I see how that functionality is missing. Modals can be closed clicking the background or the close icon, but it's true that having some form or custom buttons may require to hide it programmatically. I'll do a PR fixing this so that the name is respected if provided.

Other than that, I think I'll also add an event called "close", if the custom component emits that event it will do the same. I think this is useful in order to prevent having to name modals only for that.

What @RenanOliv mentions would work, although I think is a bit hackish and exposes implementation of modals-container, so I would refrain from documenting or using that.

PR coming soon!

[GopherJ]

@euvl How can I close the modal in vuex? Something like:

// vuex
import comp from '@/components/xxx';

Vue.prototype.$modal.hide(comp);

[vishnumanjunath]

@GopherJ have you solved it yet?

[Speedrockracer]

Necroing this since I can't find any solutions for my issue. I need to close my dynamic modal on route change (Vue router). It's a bit awkward that the modal is still there when a user pressed the back button... I there a way to close all open modals from a callback in the router?

[FlorianWerndl]

@Speedrockracer maybe you can make use of the name property. Every time you open a dynamic modal, assign a name to it and save it into an array (could be stored in vuex). On route change, close modal for every given name.

I use the name property as well to close it from a router hook.

   ...
    const props = {
      onProceed: () => {
        next();
        Vue.prototype.$modal.hide('unsaved');
      },
    };
    const options = {
      name: 'unsaved',
    };

    Vue.prototype.$modal.show(CiModalUnsaved, props, options);
    ...