product detail

src/components/ProductDetail.vue

@@ -1,2 +1,55 @@
 <template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-button color="medium" @click="cancel">Cancel</ion-button>
+      </ion-buttons>
+      <ion-title>Modal</ion-title>
+      <ion-buttons slot="end">
+        <ion-button @click="confirm">Confirm</ion-button>
+      </ion-buttons>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <ion-item>
+      <ion-label position="stacked">Your name</ion-label>
+      {{ name }}
+      <ion-input v-model="name" placeholder="Your name"></ion-input>
+    </ion-item>
+  </ion-content>
 </template>
+
+<script setup lang="ts">
+  import {
+    IonContent,
+    IonHeader,
+    IonTitle,
+    IonToolbar,
+    IonButtons,
+    IonButton,
+    IonItem,
+    IonLabel,
+    IonInput,
+    modalController,
+    onIonViewWillEnter, 
+  } from '@ionic/vue';
+  import { ref, onMounted } from 'vue'
+
+const props = defineProps(['pid'])
+
+//console.log(pid)
+
+let name = ref("xxx")
+function cancel(){
+  return modalController.dismiss(null, 'cancel');
+}
+function confirm(){
+  return modalController.dismiss(name.value, 'confirm');
+}
+onMounted(() => {
+//onIonViewWillEnter(() => {
+  console.log("on mounted")
+  console.log(props.pid)
+})
+
+</script>

src/views/ProductListPage.vue

@@ -16,10 +16,10 @@
     </ion-header>
     <ion-grid>
       <ion-row>
-        <ion-col size="6" v-for="c in prods">
+        <ion-col size="6" v-for="(c, index) in prods"  :key="index" @click="openModal">
           <ion-img :src="c.cover_image_str"></ion-img>
           <ion-label class="ion-text-wrap">
-            {{ c.name }}
+            {{ c.name }} {{ message }}
           </ion-label>
         </ion-col>
       </ion-row>
@@ -28,7 +28,9 @@
 </ion-page>
 </template>
 <script setup lang="ts">
-import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonBackButton, IonButtons, onIonViewWillEnter, IonCard, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCardContent, IonRow, IonGrid, IonCol, IonImg, IonButton, IonLabel} from '@ionic/vue';
+import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonBackButton, IonButtons, onIonViewWillEnter, IonCard, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCardContent, IonRow, IonGrid, IonCol, IonImg, IonButton, IonLabel, modalController} from '@ionic/vue';
+
+import ProductDetail from '@/components/ProductDetail.vue'
 
 import axios from 'axios';
 import { API_URL } from '../api_config';
@@ -40,10 +42,28 @@ const { cat  } = route.params;
 let prods = ref([])
 onIonViewWillEnter( async() => {
 })
+
+let message = ''
 onMounted( async() => {
   console.log(cat)
   const res = await axios.get(API_URL+`fn_products/?format=json&cat=${cat}`)
   prods.value = res.data.results
   console.log(prods)
 })
+
+const openModal = async () => {
+  const modal = await modalController.create({
+    component: ProductDetail,
+    componentProps: {pid: 5}, 
+  });
+  modal.present();
+
+  const { data, role } = await modal.onWillDismiss();
+
+  if (role === 'confirm') {
+    console.log(data.value)
+    message = `Hello, ${data}!`;
+    console.log(message)
+  }
+}
 </script>