Developers generally come to Vue because they want something like AngularJS, but not Angular.
Filters are part of this package: they are simple and powerful.
Filters are classes that take some values as input then use them to display a final output value. They can be compared to Services, however, they are generally directly used in the DOM and that’s what we will see in this Ionic Vue tutorial.
As usual, don’t forget to go back to the first tutorial to bootstrap your Ionic Vue stack.
In this tutorial, we will use the Ionic Vue Filters in four different ways, we will see:
- A TypeScript implementation
- The power of Computed Properties
- The Programmatic way
The TypeScript Way
We will need the vue-ts-decorate library that we used in the previous tutorials:
We can now create the first Filter at the typescript-filters/sum.filter.ts location:
We import Filter from the vue-ts-decorate library.
We pass the “TsSum” value to this Decorator alongside the TsSum Class.
This class only needs a filter method to be functional.
This method has a value and some params. Both of them are quite similar, they differ in the way they are used in the DOM.
All we do here is summing the value and params, nothing crazy.
We can now add the TsSum Filter to our Ionic Vue root instance in the main.ts file:
The TsSum Filter is imported then added to the filters field.
Note that we have an originalValue property initialized in the data field, this value starts at 0 and will be used in the following index.html:
The Vue Filter looks like an AngularJS Filter.
We first pass the originalValue property to the filter and add two optional arguments. Here, we just use some numbers, however, in a real application, this is generally where the options are set like the currency, the language, etc.
And we have our Ionic Vue TypeScript Filter working:
Here is another solution:
We only need to create a VanillaSum function that will take a value and some params.
Just like before, we return the sum.
Add the filter to the Ionic Vue root instance in the main.ts file:
And use the filter in the index.html:
Vue does come with some novelties.
Computed Properties are one of them.
A computed property looks like this:
Just like a Filter, it returns an output value that will be displayed in the DOM. However, the output is stocked in a cache that can only be busted if the originalValue property changes.
Making some modifications to the index.html:
We add the computedSum binding and an input to update the originalValue property.
Allowing us to see the changes:
Before going to the last part, I’d like to highlight a common mistake.
Sometimes we can be quick on the trigger when it comes to using the double arrow and this can lead to some surprises:
We have already seen this in the Ionic Vue Component tutorial, so be careful 😉.
The Programmatic Way
Finally, Ionic Vue Filters can be programmatically used.
Instead of putting them in the DOM, we can call them directly in an Ionic Vue Components.
We go back to the main.ts file:
We create a new method called useSumFilter.
In this method, we grab the VanillaSum Filter by accessing the $options.filter object.
The $option field is quite powerful, it contains some data about the Ionic Vue root Component like its components, directives, methods, etc.
Once the vanilaSumFunction is set, we can use it with some simple parameters and add it to the index.html:
And we get:
Filters are keystones for Ionic Vue applications.
If they didn’t exist, we would have to bloat our Components with $watch declarations and it would look like a mess.
Computed Properties offer better performances. However, without the experience, this can lead to hours of debugging trying to understand why the bindings aren’t updating.