Uibuilder - remove listeners for .onChange

I have been using uibuilder to create an app and first I want to say, thank you for developing this great tool!

I have run into an issue where my app, which is a single page app using vue-router, is continuing to make copies of the listeners each time I navigate to any page where the listener was defined. I find it convenient to define the ".onChange" events inside the component where the logic is taking place, but it is creating this issue. It makes sense that it's behaving this way.

How can I remove these listeners when the component is destroyed (using vue's beforeDestroy method)?

In other things I've worked with, when a listener is created, a function is returned to allow "unwatching" when your component is destroyed, but I don't see any function returned from uibuilder.onChange.

Hi & thanks for the kind words.

I'm not sure I've quite got the gist of what you are seeing I'm afraid (I'm not all that well at the moment so that might be why). Could you share some code?

It is quite possible that I've not really accounted for removing listeners as I'd not really considered that requirement. I would have thought that once you had loaded a component, its internals would stay active, that seems sensible.

So if you are wanting to remove a listener, you need to remove the entry from the self.events[prop] array.

The problem though is that I only maintain the event array by prop which means that it isn't simple to remove just a single entry since you cannot easily know which one you need to remove if you have multiple on the same prop name.

Given that the onChange function always adds to the end of the array for the given property, I guess the easiest thing would be to amend the code to return the array offset. That way, you could retain that and would then be able to set the function to an empty return (you can't delete it of course as it would throw out all of the other references.

An easier work around would be to add code to the onChange callback function so that you can disable it as needed.

Let me know if you can think of anything else.

Hi, thank you for the response @TotallyInformation.

What I will try to do is move all of my "onChange" listener logic into my index.js file so they are only ever initialized one time, then store any results from actions they take as a variable in a public store, which will provide the data to any component that wants to use it.

I will avoid trying to manage listeners. I will try to post my solution when I figure it out.

Thanks!

OK, thanks. I have put a listener into a component and it works fine, I just wasn't unloading/reloading the component as you seem to be doing?

If you come up with any better ways to handle things, let me know.