Catch emits with ionic modal controller

Question

How can I catch the this.$emit from the ionic model controller?
I've found this question, but the solution is deprecated: How can i catch a modal this.$emit using ionic modal controller How should I do this in Vue3?

My code looks like this:

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

The error is the following:

The Events api `$on`, `$off` `$once` is deprecated.

Hi, Have a look on this migration doc https://v3.vuejs.org/guide/migration/events-api.html#overview — Yash Maheshwari, May 14 '21 at 07:42
can you provide more code on what you are trying to accomplish with the modal? — Aaron Saunders, May 14 '21 at 17:55

score 0 · Answer 1 · answered Sep 23 '22 at 12:33

I resolved this recently by passing a prop "update" with the function "updateProducts" and defining the prop "update" in the modal component and then calling it with a this.update(product). This would update the modal without closing it.

this.modal = await modalController.create({
                component: ProductUpdateModal,
                componentProps: {
                  title: 'Update Product',
                  update: (product) => this.updateProducts(product)
              },
                
            })

In modal component:

props: {
  title: {
    type: String,
    default: 'Product'
  },
  update: { type: Function }
},


methods: {
   updateProductInfo(product) {
      this.update(product);         
   },
}

Catch emits with ionic modal controller

1 Answers1