Error message after call of menuController.open() on ion-menu: "ASSERT: can not be animating"

Ionic Framework
22

I mentioned that

document.querySelector(‘ion-menu’)?.open(false);

would be the solution. But after dangling around with the components of Ionic in VueJs I want to present you the regular practice for usage. The way I show uses VueJs3 (Composition Api) with Ionic7 and I will simplify the regular usage on an example with the ion-alert component. The same way you will be able to call methods and properties on other components of Ionic, like the ion-modal, ion-menu etc.

TL;DR:
Use

myAlert.value.$el.present(); // method, good
console.log(myAlert.value.isOpen) // property, good

in the script part and use

myAlert.$el.present(); // method, good
{{ myAlert.isOpen; }} // property, good

in the template part (without the .value property).

Doing it with

document.querySelector(‘ion-alert’)?.present() // works, but naaaah … dirty … bah!

as mentioned above does work, BUT it’s not the best practice.

Here’s a simpilfied code part with ion-alert as example, how you do it the nice way:

<template>
    <ion-page>
        <ion-alert ref="myAlert" >...</ion-alert>
        ...
        <ion-button @click="() => {
            myAlert.$el.present(); // This way for calling the methods, notice that .value property is not used here
       }">...</ion-button>
       ...
       The alert is open: {{ myAlert.isOpen }} <!-- This way for properties -->
</template>

<script lang="ts">
import {
    IonAlert,
    IonButton,
    ...
} from '@ionic/vue';

export default defineComponent({
    components: {
        IonAlert,
        IonButton,
        ...
    },
    setup() {
        const myAlert = ref();
        ...
        const myFunc = () => {
            myAlert.value.$el.dismiss(); // This way for calling the methods, notice the .value property
            console.log('The alert is open:', myAlert.value.isOpen); // This way for the properties
        }
        ...
        return {
            myAlert,
            ...
        }
    }
}

The same way you’ll reach the methods of other components of Ionic. If you need to get touched on the properties of a component, don’t use the $el property. Just go ahead directly on the reference of the component, like myAlert.isOpen in the templates or myAlert.value.isOpen in the script part.

Have a nice day :slight_smile: