[FIXED] Unable to listen to emitted events with Ionic 5

Issue

I created a simple ionic app that allows users to book services. The user would select a service category, choose a service(s) then navigate to a form to complete the booking.

I’ve setup an event bus using tiny emitter since the project uses vue 3 with the composition api. The data emits as expected however when navigating to the booking form the listener is not triggered.

The expected behaviour is to get the selected service(s) and send it along with the rest of the booking info to a REST api.

eventBus.js

import { TinyEmitter } from 'tiny-emitter';
const emitter = new TinyEmitter();
const eventBus = () => {
    return { emitter };
};
export default eventBus;

Service.vue

// template

<ion-button routerDirection="forward" routerLink="/booking" @click="sendEvent">Book Now</ion-button>

// script

import eventBus from './eventBus';

export default {
  ...
  setup() {
    ...
    const sendEvent = () => {
      eventBus().emitter.emit('selected-service', 100) // the real code emits an array
    }
    return { sendEvent }
  }

}

Booking.vueNothing happens in the console log

<script>
...
onMounted(() => {
  eventBus().emitter.on('selected-service', (payload) => {
    console.log('listener', payload);
  })
})
</script>

I know this works in a regular Vue 3 project but I’m not sure why it’s not working with ionic.

Things I’ve tried

UPDATE

I noticed the listener gets called when I navigate off the booking page then back to it. So if I go from service details -> booking -> back to service details -> booking it triggers the bus and the payload is captured.

chrome dev tools

Solution

This may be a framework level bug. I’ve spoken to the Ionic team via twitter and was advised to use query params instead so that’s the route I took.

enter image description here

Answered By – carlhandy

Answer Checked By – Clifford M. (Easybugfix Volunteer)

Leave a Reply

(*) Required, Your email will not be published