Namespace methods (and maybe other filters)

[Kevin Ball]

The array filters are implemented as methods in a mixin, which can cause problems if the names collide with methods in other components or mixins. (I just spent a couple hours tracking down why a 3rd party component wasn't working, and turned out they had a prop named filterBy that was getting clobbered by the filterBy method from vue-filters.

The names used are pretty common, so this is likely to cause many issues when you mix in the filters globally (as you do in Nuxt with a plugin).

Probably the best solution would be to namespace all the methods so they are unlikely to collide. E.g. vfOrderBy instead of orderBy. This could be optional so those who don't need it (they're using filters locally in a component instead of globally in an app) wouldn't have to use it.

[Erik Verbeek]

I just had the same issue using vue-select@2.5.0 which also uses the filterBy name for a method. Managed to fix it by pulling the filterBy method from the package and build in in manually where I needed it and removed the package.

[Paman Beruang]

so the solution is? manual build?

[Kevin Ball]

@t0n1zz I ended up pulling out vue-filters and manually copying the pieces we were using. So yeah, I think manual build...

I think it would be very quick to update to allow optional namespacing via an alternative import, but I'm hesitant to implement that unless the maintainer expresses any interest in that approach. (cc @freearhey)

[Kevin Ball]

FWIW @t0n1zz @erikverbeek @akhoury I have implemented a version of this and submitted it as a PR. Would be happy for feedback on better approaches, or if you want to install directly from a branch I can create one that includes a recompiled distfile

[Paman Beruang]

@kball oh yea i would love to try it... i "must' need this package and on the other end i want to also adding select2 or something like that... to do search on select and multiple select but both of them just can't work together

[Jefferson Silva]

I uploaded a change that I believe solves this problem. Now just wait to leave the new version

[Marco Kaiser]

Will this bug ever get fixed in a release version? The fix is now 27 days old but the last release version is from January.

[Aleksandr Statciuk]

If you came across this bug please upgrade the package up to v0.4.0. In new version global mixins has been removed and errors must disappear.

Now in order to use methods such as limitBy, filterBy , find or orderBy , you need to register Vue2Filters.mixin in the component manually, like so:

import Vue2Filters from 'vue2-filters'

export default {
  ...
  mixins: [Vue2Filters.mixin],
  ...
}

Hope this helps.