Uncaught TypeError: app.$emit is not a function

I am using a component that uploads images using Dropzone and once the upload finishes, it should emit an event so that I can refresh the images in another components to get the new ones. The problem is that I get this error

Uncaught TypeError: app.$emit is not a function

I was calling the method within the data for dropzone options:

data() {
        return {
        dropzoneOptions: {
                    //other options
            //
            successmultiple: function(file, response) {
            this.removeAllFiles();
            app.$emit('myEvent');
            }
        }
    }
}

Now console log works and I can dump a string so that means the method successmultiple is getting called but the problem is the emit. I also tried using this.$emit but that wont work because this does not refer to the vue instance in that function. How can I access the emit in this case?

Please advice.

topvillas

8 years ago

Level 46

Try this ...

successmultiple(file response) => {
    ...
    this.$emit('myEvent');
}

That should keep the scope of this.

8 years ago

Best Answer

Level 7

@topvillas I tried that but it did not work for me. I went with creating another Vue instance and then sending the message through that and it worked. Here is what I did:

// Created another Vue instance
window.Event = new Vue();

// Now in my method I use that to emit the event
successmultiple: function(file, response) {
    Event.$emit('photosUploaded');
}

// And finally in the parent component I listen to the event and refresh the images
created() {
    Event.$on('photosUploaded', () => this.getImages());
}

1 like

Please or to participate in this conversation.