4

Hello i'm converting somme of my web code to an ionic-vue app and i wanted to know if we can catch a this.$emit from my modal using the ionic modal controller insted of classic vuecomponent.

basically i want to translate 

<NewAppointmentModal @onSuccess="handleAppointmentCreation"/>

to

this.$ionic.modalController.create({ component: NewAppointmentModal}).then(m => m.present())
//how can i catch the onSuccess event like before
Dracks
  • 107
  • 8
Ramy El Seify
  • 63
  • 1
  • 7

2 Answers2

6

ParentComponent.vue

public openModal() {
    return this.$ionic.modalController
    .create({
      component: ModalComponent,
      componentProps: {
        data: {
          content: 'New Content',
        },
        propsData: {
          //user_id: user_id
        },
        parent: this,
      },
    })
    .then(m => m.present({

    }))
}

public mounted() {
   this.$on('close', (foo) => {
       this.$ionic.modalController.dismiss()
   })
}

ModalComponent.vue

<template>
   <ion-button @click="dismissModal()">Close</ion-button>
</template>
<script>
   dismissModal() {
     this.$parent.$emit('close', { foo: 'bar' })
   }
</script>
Brian
  • 1,295
  • 14
  • 25
4

Brian answered correct, but there are a code line change in Vue 3: ParentComponent.vue

 this.$on('close', () => {
       this.$ionic.modalController.dismiss()
   })
Melvin Saavedra
  • 41
  • 1