vue.jsionic-frameworkionic-vue

How can i catch a modal this.$emit using ionic modal controller


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 

Solution

  • 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>