how to access vuejs filters in quasar project.

thamibn

i have created a quasar project using quasar CLI, i want to use the vue filter “orderBy” i followed the vue docuementation, however quasar is complaining about ‘_’ not defined?

here is the link for the filter doc
https://vuejs.org/v2/guide/migration.html#Replacing-the-orderBy-Filter

s.molinari

That is a page for migrating a Vue 1.0 project to Vue 2.0. In other words, that filter no longer exists. Instead, you should use the computed property example given.

Scott

thamibn

@s-molinari when i use the computed property it complains about the underscore not defined(_).

s.molinari

Ahh…have you installed lodash?

Scott

thamibn

@s-molinari how can i install loadash the plugin feature in quasar confuses me currently and i am newbie.
Thanks

zeidanbm

The best way to do this, is by installing the module from lodash that you need and not the whole library. So in your case you only need the orderby method.

Install lodash module using npm or yarn from inside your project root folder

// using yarn
yarn add lodash.orderby
// or if using npm
npm install lodash.orderby --save

Import the module to be used. Here you have two options.

1.Quasar App plugins

// using app plugins, use this way if the method is being used a lot across your app
import orderby from 'lodash.orderby';

export default ({ Vue }) => {
    // this will create the $orderBy object on the Vue instance
    // you will be able to access it with this.$orderBy or Vue.$orderBy
    Vue.prototype.$orderBy = orderby;
}

2.The other option is regular import on component level

// inside your component you will import the method
// either inside script tag if using .vue or at top of .js file
import orderby from 'lodash.orderby';

Also if you want to use filters in vue, you can still do that. But you have to create yourself, as vue dropped builtin filters. Here is a demo on how this can be done.

Vue.filter('currencyFilter', (value) => {
   // here we are adding a comma every 3 characters
   return String(value).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
});

Then inside our component we can use it as we would use normal filters.

P.S: You can create filters inside components or use quasar app plugins for that. But again this will depend on how often and how many components are going to use that filter. So, I would rather use computed properties for simple filters like the one you have or the one i gave example on, but if there’s a lot of components(>25%) using this then I would prefer a filter placed in app plugins.

No More Posting New Topics!

how to access vuejs filters in quasar project.