Vue - Firing Emit On Parent Component - this.(functionName) not found

;TLDR

In components that execute methods based on events emitted from child components, make sure to set the vue instance = to a variable prior to any $emit.on functions within the parent component's mounted() section:

parent-emit-10.png

 

Background:

I have an addresses component, which is made up of several address components in vue.

Each address component consists of an <address> tag, an "Edit" button, an "Edit Form" and a "Delete" button (also another Form, specifically for deletions). After performing an action on the individual "address" components, I need to refresh the entire "addresses" component to remove any that have been deleted OR edited.  Also, you might notice the "Create Address" button. This is another component that consists of the button, and a "create address" form.

To Recap, the addresses component contains:

  1. A Create Address child component (button  and form)
  2. An address child component (the displayed data, an edit form and a delete form)

I am employing the use of the global event bus, setup in Laravel automatically.  Please keep this in mind.

parent-emit-1.png
parent-emit-2.png
parent-emit-3.png

Background 2  - setting Up the Emit:

In the "Address.vue" component

parent-emit-4.png
parent-emit-6.png

In the my "Delete.vue" component (the actual delete form):

parent-emit-5.png

In  the "Addresses.vue" component (where we are trying to catch the events):

parent-emit-7.png

 

 

Problem:

After catching an event from the global command bus, I received the following error: "Error in event handler for "address:deleted": "TypeError: this.reloadAddresses is not a function".

This happens because "this" references the event that is firing, vs the actual vue instance I am on.  As the "reloadAddresses" function exists outside that reference, it cannot be found. 

In NON-COMPONENT vue systems, I normally set the page's vue instance to "pageViewInstance", and I can then reference that throughout the page's life:

parent-emit-8.png

You would then replace "this.reloadAddresses()" with "pageVueInstance.reloadAddresses()"...or create a value within the mounted function " let vm = pageVueInstance;"

However, I don't think I can do that here, because I am actually performing this within another component (where we are "Exporting Default" at the top of the page) - I also don't want to clutter up the top of my template:

parent-emit-9.png

FIX:

Set the variable within the MOUNTED section of the Addresses component (the parent component), before the emit variables are called:

parent-emit-10.png

Setting the vm = this now referencees the Vue instance of the parent component.  As such, it now has access to the "reloadAddresses()" function created in the "methods" section.