Managing events in VueJS

Question

Managing events in VueJS

I am experimenting with VueJS to understand how to use emit and listen methods. I encountered some unexpected results that I cannot figure out. My expectation was for the initMap() function to be called and for the console to log the expected output, which it does, but an error message appears at the top of the page.

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

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>

javascript vue.js

Answer 1

Answer №1

When mounting the component, ensure to correctly call the initMap method by removing the parentheses at the end. Update your code like this:

Here is the corrected version:

mounted() {
    this.$events.$on("MapLoaded", this.initMap);
}

Answer 2

When mounting the component, ensure to correctly call the initMap method by removing the parentheses at the end. Update your code like this:

Here is the corrected version:

mounted() {
    this.$events.$on("MapLoaded", this.initMap);
}

Answer 3

Answer №2

Encountered a similar issue when I had a handler declared outside of the 'methods' block.
To clarify, the first approach did not yield the desired result.

export default {
    name: 'app',
    created() {
        EventBus.$off('change-tab');
        EventBus.$on('change-tab', this.changeTab);
    },
    changeTab( newTab) {
        // implement a smart solution here
    },
}

However, using this alternative method solved the problem:

export default {
    name: 'app',
    created() {
        EventBus.$off('change-tab');
        EventBus.$on('change-tab', this.changeTab);
    },
    methods : {
        changeTab( newTab) {
            // implement a smart solution here
        },
    }
}

Answer 4

Encountered a similar issue when I had a handler declared outside of the 'methods' block.
To clarify, the first approach did not yield the desired result.

export default {
    name: 'app',
    created() {
        EventBus.$off('change-tab');
        EventBus.$on('change-tab', this.changeTab);
    },
    changeTab( newTab) {
        // implement a smart solution here
    },
}

However, using this alternative method solved the problem:

export default {
    name: 'app',
    created() {
        EventBus.$off('change-tab');
        EventBus.$on('change-tab', this.changeTab);
    },
    methods : {
        changeTab( newTab) {
            // implement a smart solution here
        },
    }
}

Answer 5

Answer №3

One situation I encountered was when I forgot to include the second argument in this.$root.$emit('someEvent')

To resolve the issue, I added an empty object as the second argument like this:

this.$root.$emit('someEvent', {})

;

Interestingly, despite this error, the reactivity within the $on function remained intact.

Let me illustrate with this code snippet:

handleScroll() {
  //   console.log(e);
  this.$root.$emit("bodyScroll", {});
},

And in a different component:

 data() {
    return {
      scroll: false
    };
  },
 mounted() {
    this.$root.$on("bodyScroll", data => {
      console.log("Receiving events", data);
      this.scroll = true;
    });
  },

Surprisingly, even with the error, the scroll event still functioned properly.

Answer 6

One situation I encountered was when I forgot to include the second argument in this.$root.$emit('someEvent')

To resolve the issue, I added an empty object as the second argument like this:

this.$root.$emit('someEvent', {})

;

Interestingly, despite this error, the reactivity within the $on function remained intact.

Let me illustrate with this code snippet:

handleScroll() {
  //   console.log(e);
  this.$root.$emit("bodyScroll", {});
},

And in a different component:

 data() {
    return {
      scroll: false
    };
  },
 mounted() {
    this.$root.$on("bodyScroll", data => {
      console.log("Receiving events", data);
      this.scroll = true;
    });
  },

Surprisingly, even with the error, the scroll event still functioned properly.

Managing events in VueJS

Answer №1

Answer №2

Answer №3

Similar questions

Guide to showing MySQL data on an HTML page using NodeJS

Changing the input value in Nuxt / Vue 2 after it has been overridden

Creating an HTTP interceptor in Backbone: A step-by-step guide

Using JavaScript, generate ten clickable circles on the screen. Each circle should display the number of times it has been clicked in the center when interacted with

Unable to retrieve data from file input using jQuery due to undefined property "get(0).files"

What is the reason that when a <div> click on a mobile device includes a jQuery ('#item').fadeOut() function, the CSS of the '#item' element maintains its previous hover state

An error was encountered when attempting to reference an external JavaScript script in the document

Looking for specific characters in a string within an array of objects: a guide

Is it expected to conceal children who are 2 years old?

Animating the first element using Semantic UI React Transition Group

Hide CSS background with React onclick

When I implemented snap.js on my main content wrapper, I noticed that it was causing a disruption in a few of my jQuery functions

The Angular promise refuses to resolve at my desired time

The PHP-generated table is not being appended to the specified div with jQuery

Trouble getting a sticky element to align with a two-column grid within a parent container

Issues with dynamically loading jQuery arise specifically on certain websites

Tips on how to correctly pass a .JSON object in the setState function of a reactJS

Issue with utilizing display: table and overflow: hidden in Internet Explorer and Firefox, functioning properly on Webkit and Blink

Is the target="_blank" attribute malfunctioning in Google Chrome?

Checking email existence through remote jQuery validation