Trying to implement a modal in an Ionic Vue app, I encountered a strange issue where the content is being displayed twice. This problem persists even when using the example code provided on the Ionic website:
The modal content component looks like this:
<template>
<div>
<ion-header>
<ion-toolbar>
<ion-title>{{ title }}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
{{ content }}
</ion-content>
</div>
</template>
<script>
import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
name: 'Modal',
props: {
title: { type: String, default: 'Super Modal' },
},
data() {
return {
content: 'Content',
}
},
components: { IonContent, IonHeader, IonTitle, IonToolbar }
});
</script>
Here's how the main component uses the modal:
<template>
<ion-page>
<ion-content class="ion-padding">
<ion-button @click="openModal">Open Modal</ion-button>
</ion-content>
</ion-page>
</template>
<script>
import { IonButton, IonContent, IonPage, modalController } from "@ionic/vue";
import Modal from "../components/ItemModal.vue";
export default {
components: { IonButton, IonContent, IonPage },
methods: {
async openModal() {
const modal = await modalController.create({
component: Modal,
cssClass: "my-custom-class",
componentProps: {
data: {
content: "New Content",
},
propsData: {
title: "New title",
},
},
});
return modal.present();
},
},
};
</script>
Strangely, the content component of the modal is displayed twice.
https://i.sstatic.net/1U1LZ.png
https://i.sstatic.net/Jn0ZA.png
Moreover, the props and data are not being passed correctly to the modal content component.
Could there be something essential that I'm overlooking when working with modals in Vue Ionic?