Undefined modal

[jbutler1881]

I have kind of a strange issue with modals on an app that I’m working on… I’ll do my best to explain the issue.

I’m creating a CMS-type single-page application to maintain the content on my API.

I started off by creating a component for every “page” (ClassTypes, Staff, ContentBlocks, etc…). Each component had a data table that showed the data and a form in a modal that was opened and closed manually by button clicks. Everything was working fine.

Today, I began to refactor my application, and I’ve noticed some strange occurrences. Starting with the ClassTypes component, I broke off the data table and the modal to their own subcomponents (ClassTypesDataTable and ClassTypesModalForm) of the ClassTypes component. These components emit events via the global event bus.

On initial load of the page, everything is working as intended. However, the issue lies when I open a different modal on a different component. For instance, when I open the Staff modal, it works as intended. But if I close that modal, go back to the ClassType component via router link, and try to open the modal subcomponent again, I get an error now stating that the modal is undefined.

Is there some sort of rendering order or something that I’m missing that’s preventing the modal from being loaded by following a router link?

[a47ae]

You can try to use the Vue debug tools to check if the modal is present on the page, and if the calling component has the right prop set in order to call functions on the modal. Also, when using a global event bus, make sure that event handlers are destroyed, when the component is destroyed.

[jbutler1881]

Yes! I was improperly removing the event handlers… I was removing the callback but not the handlers themselves. That solved it. Thank you!

[a47ae]

I fell into this trap once myself, you get used to Vuejs automatically handling @event listener life cycles