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

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

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


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

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.

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

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.


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