Overriding mixins functions in Vue.js

Question

Is there any way to override a mixin function in Vue.js?

Maybe it's my mistake to be using Mixins in an OOP fashion, but I have a Page component with subtle variations but a common shared set of functions. To achieve this, I'm using an AbstractPage component and add it as a mixing for each Page.

The problem comes when one specific Page requires a slightly different behaviour in one of the functions. Out of the box, Vue doesn't override the parent function, but it adds both in an array and executes them sequentially.

Is there any way to override mixins functions? Or any idea on a workaround?

Thanks

Answer 1

So, as Bill Criswell points out in the comments, this is only a problem with events and other hook functions. From the docs:

For example, hook functions with the same name are merged into an array so that all of them will be called.

But methods, for example, won't. From the docs:

Options that expect object values, for example methods, components and directives, will be merged into the same object.

The solution is just then to execute a method from an event, instead of executing logic inside the event declaration.