Having trouble passing props to modal

I’m sure it’s a problem on my end, but I’m having issue passing along props to a modal. I could also solve this probably with a state manager, but I’m confused as to what a good one would be for this lightweight app. (Open to suggestions!)

Anyway, here is my code (Vue 3, but not TS or composition API):

Home.vue:

<template>
	<ion-page>
		<ion-header>
			<ion-toolbar>
				<ion-title>Home</ion-title>
			</ion-toolbar>
		</ion-header>
		<ion-content :fullscreen="true"
<ion-button expand="block" color="primary" @click="openUpdateModal()">Update</ion-button>

		</ion-content>
	</ion-page>
</template>

<script>
import { modalController, IonPage, IonHeader, IonToolbar, IonContent, IonTitle } from '@ionic/vue';
import Update from '../views/Update.vue';

export default {
	name: 'Home',
	components: { IonHeader, IonToolbar, IonContent, IonPage, IonButton, IonTitle },
	},
	methods: {
		async openUpdateModal() {
			const modal = await modalController.create({
				component: Update,
				componentProps: {
					propsData: {
						title: 'String to pass!',
					},
				},
			});
			return modal.present();
		},
	},
};
</script>

Modal.vue:

<template>
	<div class="ion-page">
		<ion-header>
			<ion-toolbar>
				<ion-title>Update</ion-title>
			</ion-toolbar>
		</ion-header>

		<ion-content padding>
			Test
		</ion-content>
	</div>
</template>

<script>
import { modalController, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';

export default {
	name: 'Update',
	components: { IonHeader, IonToolbar, IonTitle, IonContent },
	props: {
		title: String
	},

	created: function() {
		console.log('this.title', this.title);
	},
};
</script>

this.title returns undefined

Anything obvious that I’m doing wrong? I am just trying to capture the data on the mounted method because I need to use the data to execute some code.

1 post - 1 participant

Read full topic