Vue js broadcast not working

Question

I have this Vue instance:

var vm = new Vue({
    el: '#app',
    data: {
        user: {
            email: '',
            password: '',
            passwordconfirm: '',
            bars: {},
            authentication_token: '',
            id: 0
        }
    },
    components: {
        dashboard: dashboard
    },
    events: {
        'onLoginSuccesfull': function(user) {
            // do stuff with user obj
            this.$broadcast('onUserLoggedIn');
        }
    }
}

It has a 'dashboard' component:

var dashboard = Vue.extend({
    template: '#dashboard',
    data: function() {
        return {
            currentPage: 'main'
        }
    },
    components: {
        'dashboard-mainpage': dashboardmainpage
    }
    events: {
        'onUserLoggedIn': function() {
            alert('I should be firing bu I am not!');
        }
    }
});
Vue.component('dashboard', dashboard);

The 'dashboard' has a 'dashboard-mainpage' component:

var dashboardmainpage = Vue.extend({
    template: '#dashboard-mainpage',
    methods: {
        loadData: function() {
            this.$http.get('/dashboard/main.json', {
                authenticity_token: window._token
            }).then(function(response) {
                var data = JSON.parse(response.body);
                console.log(data);
            }, function(response) {
                console.log(response);
                this.$dispatch("onRequestUnauthorized");
            });
        }
    },
    events: {
        'onUserLoggedIn': function() {
            alert('I should be firing as well but I am not!');
            this.loadData();
        }
    }
});

The problem is that when the 'onLoginSuccesfull' event is triggered on the main Vue instance, the subsequently broadcasted 'onUserLoggedIn' on the 1st and 2nd level descendant are not triggered, when calling 'this.$broadcast('onUserLoggedIn');'.

I know that event callbacks must return true to keep propagating down the chain but the first event callback (on 'dashboard') is not even triggered.

What am I missing?

Thanks!

===== EDIT =====

Main app:

Dashboard template:

Dashboard-mainpage:

Corstiaan · Accepted Answer

Ok. For anyone who is going to wander onto this "issue". Here's the fix.

I used 'v-if' attributes on the children that were listening to the 'onUserLoggedIn' event. The docs for 'v-if' say:

Conditionally render the element based on the truthy-ness of the expression value. The element and its contained data bindings / components are destroyed and re-constructed during toggles. If the element is a element, its content will be extracted as the conditional block.

So, when 'v-if = "something false"' on some child component it practically does not exist and thus is not able to do or respond to anything, including events.

When using 'v-show' instead of 'v-if' to conditionally toggle certain components, the component stays "alive" and will be able to respond.

Vue js broadcast not working

Answers (2)

Related Questions