VueJS event handling

Question

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 './components/GISView.vue';
import VueEvents from 'vue-events';

window.Vue = Vue;
Vue.use(VueEvents)

var App = window.App = new Vue({
  el: '#app',
  components: {
    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 think you want $emit() and $on(), not $events.fire() and $events.$on(). (I'm not sure $events is even part of vue? Looks like it's a plugin that purports to simplify event handling) — Daniel Beck
– Daniel Beck, Commented May 10, 2017 at 17:20

Red Roboto · Accepted Answer · 2018-02-15 04:00:31Z

8

mounted() {
            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);
            }

answered Feb 15, 2018 at 4:00

Red Roboto

1011 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MonoThreaded · Accepted Answer · 2018-07-27 23:29:03Z

1

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
        },
    }
}

answered Jul 27, 2018 at 23:29

MonoThreaded

12.1k15 gold badges78 silver badges109 bronze badges

Comments

HalfWebDev · Accepted Answer · 2018-10-19 09:02:48Z

0

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 component.

 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.

answered Oct 19, 2018 at 9:02

HalfWebDev

7,74814 gold badges72 silver badges110 bronze badges

Collectives™ on Stack Overflow

VueJS event handling

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related