Vue: unable to call component methods via vue refs, i.e to manually dismiss a modal

Ionic Framework Ionic Vue
1

I’m trying to manually dismiss an ion-modal by calling the exposed dismiss method on the html element via vue refs, but it doesn’t seem to work and the ref doesn’t have access to the exposed method

See a code example here Ionic 5 Vue 3 - CodeSandbox

modalRef.value.dismiss() ← doesn’t work
modalRef.value.$el.dismiss() ← doesn’t work
document.querySelector('ion-modal').dismiss() ← works

2 
import { ..., modalController } from '@ionic/vue';
...

modalController.dismiss();
1 Like
3

Thanks, this works for that scenario, but it doesn’t explain why document.querySelector('ion-modal').dismiss() works, but not the ref version or how to call ionic component’s methods via refs in general

4

The documentation says to close modals using the modalController… for the other issues you will need to be more specific and maybe open a separate issue.

5

if you take a look at the documentation here ion-modal: Ionic Framework API Docs the component has exposed methods such as dismiss onDidDismiss onWillDismiss present, etc… These methods should be exposed on the component itself directly.

Using the modal controller makes sense if I’m using the modal controller to display/create the modal, but in my case I’m relying on the component itself by rendering ion-modal in my template. so far I’m unable to call any methods mentioned in the documentation via vue refs.

The same argument holds for using any of the ionic components with vue refs in general not just ion-modal which happens to have an alternative solution via modalController

6

Seems like a bug - could you create an issue on Issues · ionic-team/ionic-framework · GitHub? I think the problem is we render a div initially: ionic-framework/overlays.ts at 2d07d8216af908b181c5e7e438e79a049bb6d8c2 · ionic-team/ionic-framework · GitHub and then when the modal is presented we use Teleport to move the actual ion-modal to the root of your app, so we probably need to do something else here to handle refs.

2 Likes
7

Thanks, I’ve created an issue here bug: unable to call component methods via vue refs · Issue #23219 · ionic-team/ionic-framework · GitHub

1 Like
8

thank you very much! this worked.
but to me, this isn’t very intuitive.
i modalController.create({component:MyModal, …}) a modal, i want the ability to dismiss this modal from within MyModal. i thought to myself, “to dismiss within, MyModal component must have access to this created modal, right?”. but i just couldn’t find a way to do that. i just didn’t realize you can just import modalController independently and call dismiss() in it, the parent created modal would dismiss. this is like a static method in the OOP sense. to me, this really isn’t OOP intuition friendly.
thanks again, sorry about rant :stuck_out_tongue: