I am testing emit and listen methods with VueJS to learn how to use it. I get some strange results, I don't understand. I would expect my function initMap() is called and the console is logging, which it does, but the error appears on top.
Uncaught TypeError: Cannot read property 'apply' of undefined
at Vue$3.Vue.$emit (vue.js:2186)
at Vue$3.emit (main.js:131)
at Vue$3.boundFn [as emit] (vue.js:167)
at Vue$3.fire (main.js:146)
at Vue$3.boundFn [as fire] (vue.js:167)
at Vue$3.initMap (main.js:93)
at Vue$3.boundFn [as initMap] (vue.js:168)
at js?key=AIzaSyBWZxmn3CYyhAT2vnv9tOBgQSGzrSBzCsM&libraries=places,geometry&callback=App.initMap:98
at js?key=AIzaSyBWZxmn3CYyhAT2vnv9tOBgQSGzrSBzCsM&libraries=places,geometry&callback=App.initMap:56
at js?key=AIzaSyBWZxmn3CYyhAT2vnv9tOBgQSGzrSBzCsM&libraries=places,geometry&callback=App.initMap:53
Vue.$emit @ vue.js:2186
emit @ main.js:131
boundFn @ vue.js:167
fire @ main.js:146
boundFn @ vue.js:167
initMap @ main.js:93
boundFn @ vue.js:168
(anonymous) @ js?key=AIzaSyBWZxmn3CYyhAT2vnv9tOBgQSGzrSBzCsM&libraries=places,geometry&callback=App.initMap:98
(anonymous) @ js?key=AIzaSyBWZxmn3CYyhAT2vnv9tOBgQSGzrSBzCsM&libraries=places,geometry&callback=App.initMap:56
(anonymous) @ js?key=AIzaSyBWZxmn3CYyhAT2vnv9tOBgQSGzrSBzCsM&libraries=places,geometry&callback=App.initMap:53
(anonymous) @ js?key=AIzaSyBWZxmn3CYyhAT2vnv9tOBgQSGzrSBzCsM&libraries=places,geometry&callback=App.initMap:56
(anonymous) @ js?key=AIzaSyBWZxmn3CYyhAT2vnv9tOBgQSGzrSBzCsM&libraries=places,geometry&callback=App.initMap:107
(anonymous) @ js?key=AIzaSyBWZxmn3CYyhAT2vnv9tOBgQSGzrSBzCsM&libraries=places,geometry&callback=App.initMap:53
(anonymous) @ js?key=AIzaSyBWZxmn3CYyhAT2vnv9tOBgQSGzrSBzCsM&libraries=places,geometry&callback=App.initMap:107
Sc @ js?key=AIzaSyBWZxmn3CYyhAT2vnv9tOBgQSGzrSBzCsM&libraries=places,geometry&callback=App.initMap:55
Rc.eb @ js?key=AIzaSyBWZxmn3CYyhAT2vnv9tOBgQSGzrSBzCsM&libraries=places,geometry&callback=App.initMap:107
(anonymous) @ js?key=AIzaSyBWZxmn3CYyhAT2vnv9tOBgQSGzrSBzCsM&libraries=places,geometry&callback=App.initMap:141
SENDING
import GISView from './ponents/GISView.vue';
import VueEvents from 'vue-events';
window.Vue = Vue;
Vue.use(VueEvents)
var App = window.App = new Vue({
el: '#app',
ponents: {
gisview: GISView
},
methods: {
initMap: function() {
this.$events.fire("MapLoaded");
}
}
});
LISTENING
<template>
<div ref="map" id="map" class="google-map" style="position: relative; overflow: hidden;">
<div style="height: 100%; width: 100%; position: absolute; top: 0px; left: 0px;">
</div>
</div>
</template>
<script>
import GoogleMaps from '../mixins/GoogleMaps.js';
export default {
mixins: [GoogleMaps],
data() {
return {
map: ''
}
},
mounted() {
this.$events.$on("MapLoaded", this.initMap());
},
methods: {
initMap: function() {
console.log("OK");
}
}
}
</script>
I am testing emit and listen methods with VueJS to learn how to use it. I get some strange results, I don't understand. I would expect my function initMap() is called and the console is logging, which it does, but the error appears on top.
Uncaught TypeError: Cannot read property 'apply' of undefined
at Vue$3.Vue.$emit (vue.js:2186)
at Vue$3.emit (main.js:131)
at Vue$3.boundFn [as emit] (vue.js:167)
at Vue$3.fire (main.js:146)
at Vue$3.boundFn [as fire] (vue.js:167)
at Vue$3.initMap (main.js:93)
at Vue$3.boundFn [as initMap] (vue.js:168)
at js?key=AIzaSyBWZxmn3CYyhAT2vnv9tOBgQSGzrSBzCsM&libraries=places,geometry&callback=App.initMap:98
at js?key=AIzaSyBWZxmn3CYyhAT2vnv9tOBgQSGzrSBzCsM&libraries=places,geometry&callback=App.initMap:56
at js?key=AIzaSyBWZxmn3CYyhAT2vnv9tOBgQSGzrSBzCsM&libraries=places,geometry&callback=App.initMap:53
Vue.$emit @ vue.js:2186
emit @ main.js:131
boundFn @ vue.js:167
fire @ main.js:146
boundFn @ vue.js:167
initMap @ main.js:93
boundFn @ vue.js:168
(anonymous) @ js?key=AIzaSyBWZxmn3CYyhAT2vnv9tOBgQSGzrSBzCsM&libraries=places,geometry&callback=App.initMap:98
(anonymous) @ js?key=AIzaSyBWZxmn3CYyhAT2vnv9tOBgQSGzrSBzCsM&libraries=places,geometry&callback=App.initMap:56
(anonymous) @ js?key=AIzaSyBWZxmn3CYyhAT2vnv9tOBgQSGzrSBzCsM&libraries=places,geometry&callback=App.initMap:53
(anonymous) @ js?key=AIzaSyBWZxmn3CYyhAT2vnv9tOBgQSGzrSBzCsM&libraries=places,geometry&callback=App.initMap:56
(anonymous) @ js?key=AIzaSyBWZxmn3CYyhAT2vnv9tOBgQSGzrSBzCsM&libraries=places,geometry&callback=App.initMap:107
(anonymous) @ js?key=AIzaSyBWZxmn3CYyhAT2vnv9tOBgQSGzrSBzCsM&libraries=places,geometry&callback=App.initMap:53
(anonymous) @ js?key=AIzaSyBWZxmn3CYyhAT2vnv9tOBgQSGzrSBzCsM&libraries=places,geometry&callback=App.initMap:107
Sc @ js?key=AIzaSyBWZxmn3CYyhAT2vnv9tOBgQSGzrSBzCsM&libraries=places,geometry&callback=App.initMap:55
Rc.eb @ js?key=AIzaSyBWZxmn3CYyhAT2vnv9tOBgQSGzrSBzCsM&libraries=places,geometry&callback=App.initMap:107
(anonymous) @ js?key=AIzaSyBWZxmn3CYyhAT2vnv9tOBgQSGzrSBzCsM&libraries=places,geometry&callback=App.initMap:141
SENDING
import GISView from './ponents/GISView.vue';
import VueEvents from 'vue-events';
window.Vue = Vue;
Vue.use(VueEvents)
var App = window.App = new Vue({
el: '#app',
ponents: {
gisview: GISView
},
methods: {
initMap: function() {
this.$events.fire("MapLoaded");
}
}
});
LISTENING
<template>
<div ref="map" id="map" class="google-map" style="position: relative; overflow: hidden;">
<div style="height: 100%; width: 100%; position: absolute; top: 0px; left: 0px;">
</div>
</div>
</template>
<script>
import GoogleMaps from '../mixins/GoogleMaps.js';
export default {
mixins: [GoogleMaps],
data() {
return {
map: ''
}
},
mounted() {
this.$events.$on("MapLoaded", this.initMap());
},
methods: {
initMap: function() {
console.log("OK");
}
}
}
</script>
-
1
I think you want
$emit()and$on(), not$events.fire()and$events.$on(). (I'm not sure$eventsis even part of vue? Looks like it's a plugin that purports to simplify event handling) – Daniel Beck Commented May 10, 2017 at 17:20
3 Answers
Reset to default 8mounted() {
this.$events.$on("MapLoaded", this.initMap());
}
You need to remove the braces on the end of initMap method call. So:
mounted() {
this.$events.$on("MapLoaded", this.initMap);
}
I had a similar problem with a handler declared outside of 'methods'
For clarity, this doesn't work
export default {
name: 'app',
created() {
EventBus.$off('change-tab');
EventBus.$on('change-tab', this.changeTab);
},
changeTab( newTab) {
// do something smart
},
}
while this works
export default {
name: 'app',
created() {
EventBus.$off('change-tab');
EventBus.$on('change-tab', this.changeTab);
},
methods : {
changeTab( newTab) {
// do something smart
},
}
}
In my case this occured when I missed the second argument in this.$root.$emit('someEvent')
What eliminated the error is this.$root.$emit('someEvent', {});
However, none of my desired reactivity broke inside $on function because of this.
Here's what I am talking about
handleScroll() {
// console.log(e);
this.$root.$emit("bodyScroll", {});
},
And in another ponent.
data() {
return {
scroll: false
};
},
mounted() {
this.$root.$on("bodyScroll", data => {
console.log("Receiving events", data);
this.scroll = true;
});
},
So basically scroll event still worked despite the error.