Issue with emitting events in Vue with eventHub

Question

I have a component that needs to emit an event at some point in its life. This event is to be listened to by a sibling component.

I am using an event hub for this communication.

However, I am getting an Uncaught TypeError when trying to call eventHub.$emit('EventName').

Here is the full error received in the console.

vue.js?3de6:2400 Uncaught TypeError: cbs[i].apply is not a function
at Vue$3.Vue.$emit (eval at <anonymous> (http://rounds.smaa.app:8000/js/app.js:322:1), <anonymous>:2400:16)
at Vue$3.e.(anonymous function) [as $emit] (chrome-extension://nhdogjmejiglipccpnnnanhbledajbpd/build/backend.js:1:6235)
at VueComponent.importPlayers (eval at <anonymous> (http://rounds.smaa.app:8000/js/app.js:178:1), <anonymous>:98:64)
at Proxy.boundFn (eval at <anonymous> (http://rounds.smaa.app:8000/js/app.js:322:1), <anonymous>:130:14)
at Object.change [as fn] (eval at <anonymous> (http://rounds.smaa.app:8000/js/app.js:261:1), <anonymous>:118:13)
at HTMLInputElement.eval (eval at <anonymous> (http://rounds.smaa.app:8000/js/app.js:322:1), <anonymous>:2229:16)

Here is the code that is causing the error:

importPlayers(e) {

    eventHub.$emit('AdminAddedPlayers');

    this.importing = true;
    this.success.import = false;
    ...
    ...
}

There doesn't seem to be any other issues with the component, but here is the full component and the eventHub:

assets/js/components/Admin/AdminImportPlayersComponent

<template>
<div class="component">
    <!-- removed some boilerplate markup for brevity -->

    <template v-if="! importing && ! warning.invalid_data_submitted">
        <h4>Import Players</h4>
        <div class="form-group" :class="error.import ? 'has-error' : ''">
            <input type="file" @change="importPlayers($event)" id="file" class="form-control">
            <div v-if="error.import" class="help-block danger">
                You need to select a valid excel file.
            </div>
        </div>
    </template>
</div>
</template>

<script>
import eventHub from '../../../events.js';
export default {
    data() {
        return {
            importing: false,
            error: {
                import: false,
                other: false,
            },
            warning: {
                invalid_data_submitted: false,
                invalid_fixed_data_submitted: false
            },
            success: {
                import: false
            },
            invalid_players: [],
            teams: [],
            loader_color: '#0d0394'
        }
    },
    methods: {
        importPlayers(e) {

            eventHub.$emit('AdminAddedPlayers');

            this.importing = true;
            this.success.import = false;

            var formData = new FormData();
            formData.append('players', e.target.files[0]);

            return this.$http.post('/admin/players/import', formData).then((response) => {
                if (response.data.invalid_player_data.length) {
                    this.invalid_players = response.data.invalid_player_data;
                    this.warning.invalid_data_submitted = true;
                    this.getTeams();
                } else {
                    this.success.import = true;
                }
                this.importing = false;
                this.error.import = false;
                this.error.other = false;
            }, (response) => {
                if (response.data.players) {
                    this.error.import = true;
                } else {
                    this.error.other = true;
                }
                this.importing = false;
                this.warning.invalid_data_submitted = false;
                this.success.import = false;
            });
        },
        submitFixedPlayers() {

            eventHub.$emit('AdminAddedPlayers');

            this.importing = true;

            return this.$http.post('/admin/players/import/fixed', {
                players: this.invalid_players
            }).then((response) => {
                // conditionals


            }, (response) => {
                this.importing = false;
            });
        },
        getTeams() {
            return this.$http.get('/admin/teams/fetch').then((response) => {
                // team stuff
            });
        },
        setDefaultTeams() {
            // setting default teams
        }
    }
}

assets/js/events.js

module.exports = new Vue()

The Vue source points to this code in Vue:

Vue.prototype.$emit = function (event) {
    var vm = this;
    var cbs = vm._events[event];
    if (cbs) {
        cbs = cbs.length > 1 ? toArray(cbs) : cbs;
        var args = toArray(arguments, 1);
        for (var i = 0, l = cbs.length; i < l; i++) {
          cbs[i].apply(vm, args);
        }
      }
    return vm
  };

Answer 1

Solution

When using $on to listen to events emitted by the eventHub, I found that you cannot pass in arguments, like so:

vm.$on('Event', this.callback(arg1));

That seems to throw a TypeError.

The docs mention that any arguments passed in to $emit, like so:

vm.$emit('Event', args);

Will automatically be passed into the $on callback.

So the following code is correct (and works for me):

vm.$emit('AdminAddedPlayers', 1)

vm.$on('AdminAddedPlayers', this.callback);

When executed, the invocation of callback from $on is something like:

this.callback(arg);

Where arg is passed in from $emit.