Vue 2.0 instance is not hearing events emitted by vue-router components

javascript vue.js vuejs2 vue-router
Yapp Ka Howe picture Yapp Ka Howe · Sep 14, 2016 · Viewed 8.7k times · Source

I am using Vue 2.0-rc.6 (latest at the moment) and Vue-router 2.0-rc.5 (latest at the moment).

I tried to do this.$emit('custom-event') in one of my router components, and this.$on('custom-event', () => { console.log('I heard an event') }) in my Vue instance but the event was not being listened. The router component itself was hearing the event but not the Vue instance.

Any idea?

Check out this jsfiddle.

Answer

DannyFeliz picture DannyFeliz · Mar 11, 2017

An event from $emit is not propagated to the parent instance. The parent has to listen for it on the component in the template actively.

<router-view @eventname="callbackMethod" />

Related questions

How to add external JS scripts to VueJS Components

I've to use two external scripts for the payment gateways. Right now both are put in the index.html file. However, I don't want to load these files at the beginning itself. The payment gateway is needed only in when …

Read More
How can I go back/route-back on vue-router?

Ok, to explain this simply: I have 3x pages. Page 1 (Home) Page 2 (Menu) Page 3 (About) Page 1 has a- <router-link to="/menu"> button that when clicked routes to "/menu". For now, Page 2 (Menu) has a <router-link to="/"> …

Read More
Accessing Vuex state when defining Vue-Router routes

I have the following Vuex store (main.js): import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) //init store const store = new Vuex.Store({ state: { globalError: '', user: { authenticated: false } }, mutations: { setGlobalError (state, error) { state.globalError = error } } }) //init …

Read More