bug: Ion-modal not passing props data in ionic-vue #22189
Description
Bug Report
Ionic version:
"@ionic/vue": "0.5.0",
"@ionic/vue-router": "0.5.0",
"vue": "^3.0.0-0",
Current behavior:
I am migrating from Vue 2 to Vue 3 with an upgrade of Ionic-vue. On opening modal, not able to pass propsData even using basic template provided in ionic docs https://ionicframework.com/docs/api/modal.
Expected behavior:
Should pass props data to the modal component.
Related code:
View component method to open modal
async openWorkshopFilterModal() {
const modal = await modalController
.create({
component: WorkshopFilter,
cssClass: 'my-custom-class',
componentProps: {
data: {
content: 'New Content',
},
propsData: {
title: 'New title',
},
},
})
return modal.present();
},
Filter modal: WorkshopFilter.vue
<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>
On the modal opening, title value is provided by the view using the below value is not used. It keeps using Super Modal as the title value.
propsData: {
title: 'New title',
},