Vue modal creating a 2nd modal above original after navigating
Menu component on Page1: Open Menu, Select “Connor Smith” item, then it dismisses modal and routed to Page2.
Menu component on Page2: I select the ion-back-button, then open Menu again, then I see the 2nd modal that is blank in the stack on top of the original one.
I do this all the time in Angular, unsure why it is behaving odd with a blank 2nd modal in Vue. Also I did notice that in Ionic docs, ‘this.$refs’ does not work unless you do ‘this.$refs as any’.
Menu component on Page1:
<template>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-menu-button id="open-menu" autoHide="false"></ion-menu-button>
</ion-buttons>
<ion-modal ref="menuModal" trigger="open-menu" :initial-breakpoint="0.90" :breakpoints="[0, 0.25, 0.90]">
<ion-content class="ion-padding">
<ion-list>
<ion-item lines="none" @click="dismiss()">
<ion-label>
<h2>Connor Smith</h2>
</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-modal>
</template>
<script lang="ts">
import { menu } from 'ionicons/icons';
import {
IonButtons,
IonMenuButton,
IonModal,
IonContent,
IonLabel,
IonItem,
IonList,
IonBackButton,
} from '@ionic/vue';
import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';
import router from '@/router';
export default defineComponent({
name: 'MainMenu',
components: {
IonButtons,
IonMenuButton,
IonModal,
IonContent,
IonLabel,
IonItem,
IonList,
IonBackButton,
},
methods: {
async dismiss() {
await (this.$refs as any).menuModal.$el.dismiss().then(() => {
router.push('/page2');
});
},
},
setup() {
const router = useRouter();
return { router, menu, };
},
});
</script>
Menu component on Page2:
<template>
<ion-page>
<ion-header :translucent="true">
<ion-toolbar>
<MainMenu/>
<ion-title>Page2
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Page2</ion-title>
</ion-toolbar>
</ion-header>
</ion-content>
</ion-page>
</template>
<script lang="ts">
import MainMenu from '../components/MainMenu.vue';
import { defineComponent } from 'vue';
import {
IonPage,
IonHeader,
IonToolbar,
IonTitle,
IonContent,
} from '@ionic/vue';
export default defineComponent({
name: 'Page2',
components: {
IonPage,
IonHeader,
IonToolbar,
IonTitle,
IonContent,
MainMenu,
},
});
</script>