+1 vote
in VueJS by
How do you chain filters?

1 Answer

0 votes
by

You can chain filters one after the other to perform multiple manipulations on the expression. The generic structure of filter chain would be as below,

{{ message | filterA | filterB | filterB ... }}

In the above chain stack, you can observe that message expression applied with three filters, each separated by a pipe(|) symbol. The first filter(filterA) takes the expression as a single argument and the result of the expression becomes an argument for second filter(filterB) and the chain continue for remaining filters. For example, if you want to transform date expression with a full date format and uppercase then you can apply dateFormat and uppercase filters as below,

{{ birthday | dateFormat | uppercase }}

Is it possible to pass parameters for filters?

Yes, you can pass arguments for a filter similar to a javascript function. The generic structure of filter parameters would be as follows,

{{ message | filterA('arg1', arg2) }}

In this case, filterA takes message expression as first argument and the explicit parameters mentioned in the filter as second and third arguments. For example, you can find the exponential strength of a particular value

{{ 2 | exponentialStrength(10) }} // prints 2 power 10 = 1024

What are plugins and their various services?

Plugins provides global-level functionality to Vue application. The plugins provide various services,

Add some global methods or properties. For example, vue-custom-element

Add one or more global assets (directives, filters and transitions). For example, vue-touch

Add some component options by global mixin. For example, vue-router

Add some Vue instance methods by attaching them to Vue.prototype.

A library that provides an API of its own, while at the same time injecting some combination of the above. For example, vue-router

...