3

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

Improve this question
6
  • So far this is what I'm doing: if (this._events['df.submit'].length > 1) return false. It's an awful solution. Commented Sep 14, 2016 at 23:56
  • 1
    The methods should overwrite each other. Are you talking about lifecycle methods? Commented Sep 15, 2016 at 1:33
  • Sorry, it's events. And I don't think methods override each other. Commented Sep 15, 2016 at 6:20
  • 1
    jsfiddle.net/crswll/0m3eogp0 it looks like they do. Commented Sep 15, 2016 at 11:36
  • 1
    You are right, they don't! From the docs: Options that expect object values, for example methods, components and directives, will be merged into the same object.. Thanks man! Commented Sep 16, 2016 at 1:42

1 Answer 1

Reset to default
3

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.