In my vuejs3/bootstrap 4.3.1 app using "mitt": "^2.1.0" I have page with items and child component which triggeres event listingHeaderRightButtonClickedEvent when operator clicks on button of this child component :
export default {
setup () {
function triggerListingHeaderRightButtonClickedEvent () {
console.log('SOURCE triggerListingHeaderRightButtonClickedEvent parentComponentKey::')
console.log(parentComponentKey) // IN BROWSER'S CONSOLE I SEE THIS OUTPUT
emitter.emit('listingHeaderRightButtonClickedEvent', { parentComponentKey: this.parentComponentKey })
}
In the parent page I try to catch this event :
const emitter = mitt()
export default {
setup () {
emitter.on('listingHeaderRightButtonClickedEvent', params => {
console.log('TARGET listingHeaderRightButtonClickedEvent params::')
console.log(params) // IN BROWSER'S CONSOLE THIS EVENT IS NOT TRIGGERED
if (params.parentComponentKey === 'category') {
console.log('!!!!!loadCategories::')
loadCategories()
}
})
console.log('adminCategoriesListInit emitter::')
console.log(emitter)
Outputting emmiter object I see : https://i.stack.imgur.com/oHK7B.jpg What is wrong ?
Thanks!