router-view is not listening for events

[nnnayeem]

in master.vue

<headNav></headNav>
<router-view @signalChatOpen="alert(2)"></router-view>
<bottom></bottom>

from the router.vue dispatching event like this this.$emit('signalChatOpen'). But it seems in the master.vue not receiving.
In master.vue tried wraping router-view with div tag. did not work

[tetezi]

are you sure alert(2) is return a function?

[murilolivorato]

try this -

<template>
  <button @click="emitSignal">Open Chat</button>
</template>

<script>
export default {
  methods: {
    emitSignal() {
      this.$emit('signalChatOpen');
    }
  }
}
</script>

<template>
  <div>
    <headNav></headNav>
    <router-view @signalChatOpen="handleSignalChatOpen"></router-view>
    <bottom></bottom>
  </div>
</template>

<script>
export default {
  methods: {
    handleSignalChatOpen() {
      alert(2);
    }
  }
}
</script>

[nnnayeem]

I achieved my goal my listening on the mounted like the following:

this.$root.$on('signalChatOpen', () => this.divToggler());

I could not make it work by listening on the dom