In the development of my component, there arises a need to emit an event at a specific point in its lifecycle. This emitted event is intended to be listened to by another sibling component.
To facilitate this communication, I am utilizing an event hub.
However, upon trying to execute eventHub.$emit('EventName'), I encounter an error denoted as Uncaught TypeError.
Beneath is the detailed error message logged 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)
The code snippet responsible for triggering the error is as follows:
importPlayers(e) {
eventHub.$emit('AdminAddedPlayers');
this.importing = true;
this.success.import = false;
...
...
}
Although no other significant issues are apparent within the component, here is the involved component and the eventHub setup:
assets/js/components/Admin/AdminImportPlayersComponent
<template>
<div class="component">
<!-- Some standard markup has been omitted for conciseness -->
<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 must 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) => {
// handle responses
}, (response) => {
this.importing = false;
});
},
getTeams() {
return this.$http.get('/admin/teams/fetch').then((response) => {
// manage teams retrieval
});
},
setDefaultTeams() {
// set defaults for teams
}
}
}
assets/js/events.js
module.exports = new Vue()
This error in Vue springs from the following portion of Vue's source code:
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
};