Filters in Vue.js

Manav Pandya  Print   19 min read  
14 May 2019
15 May 2019
Intermediate
196

Filters are a way to formatting our text into a different form than existing format using the custom business logic. If you have used Angular than you probably know the meaning of filters and the importance of it into the development. Same way in Vue, we can use a filter to change the format of a text the way we want, and in order to use such filter functionality we should use pipe (|) symbol along with the text.

How to use filters

It is pretty easy to use filters in our application, and it can be used using the pipe (|) symbol just like the given syntax.

Syntax
 
 <div>
 Filters in Vuejs : {{ text | pipe_name }}
 </div>

As you can see that we have a text which can be anything like static text or a value from the data variable, and after applying pipe (|) symbol, followed by the pipe name, we will get the desired text formatting. This is the pretty easy to use filters in Vue by just using the pipe symbol, now let’s see how many types of in-built filters are supported and how we can define filters.

Ways to define filters

In Vue, we can define and implement the filter in two different ways which are listed below.

Local Filter Implementation

To define and implement the local filter, we can make use of filters option into the component itself. Below is the simple example of a toUpper filter using the filters section.

 <script>
 export default {
 name: "SimpleExample",
 data() {
 return {
 message: "Define local filter in vuejs"
 };
 },
 filters: {
 toupper: function(val) {
 if (!val) return "";
 val = val.toString();
 return val.toUpperCase();
 }
 }
 };
 </script>

We have separate “filters” section, where we can define and implement our custom filter logic as we did into the above example. Hence we can specify multiple filters by separating them using comma (,) operator.

Global Filter Implementation

We can also define the filters globally before creating the new vue instance. After defining the Global Filter, now we will be able to use it into the whole application wherever we want by just using the appropriate filter name. Below is a simple example to define the new Global filter.

 import Vue from 'vue'
 import App from './App.vue'
 
 // Global filter
 Vue.filter('toupper', function (val) {
 if (!val) return "";
 val = val.toString();
 return val.toUpperCase();
 })
 
 Vue.config.productionTip = false
 
 new Vue({
 render: h => h(App),
 }).$mount('#app')

This is how we can define and implement Local and Global filters using the different scope of it.

How to use Filters

After creating the Local or Global filter, now it’s time to use them, but you may think like how to use them into the template? There are two ways possible to use filters into the template which are explained below.

Using mustache syntax

Interpolation is one of the ways to bind the data values to the template which is called “one-way data binding”, same way, we can apply a filter to the same as this.

 <div>
 Using mustache syntax : {{ myValue | toLower }}
 </div>

Using v-bind expression syntax

This is another way to apply a filter, in which we can use one of the directives called “v-bind” which is the form of a “one-way data binding” mechanism. Below is the simple example using v-bind with a filter.

 <template>
 <div class="hello">
 <div>
 <label v-bind:id="message | toupper">This is label with v-bind</label>
 </div>
 </div>
</template>

As you can see, we have provided an ID attribute with the static message along with the “toupper” filter. After applying the above changes, run the application and we can see the actual output like this.

Types of Filters in Vue

Basically, Vue supports two types of Filters which are listed below.

  • In-Built Filters

  • Custom Filter

Note

In-Built filters are not supported in the latest version of Vue i.e. 2.x+, but it was supported in other versions like 0.11 and 0.12.

In-Built Filters

We know that Filters are used to apply text formatting, but we may have different requirements for different things. Than in-built filters come into the picture which provides us the way to apply different text formatting based on the filter type. Let’s see the different in-built filters with a simple example.

Capitalize

Capitalize filter is used to transform our text to the Capitalize case from the lower or any case of characters and will convert the first character of the string to the Capitalized form. For that, we just need to pass the filter name along with the pipe (|) symbol.

Syntax
 <div>
 {{ text | capitalize }}
 </div>
Example
 <template>
 <div class="hello">
 {{ title }}
 <div>
 {{ mytext | capitalize }}
 </div>
 </div>
</template>

<script>
export default {
 name: "BuiltInFilters",
 data() {
 return {
 title: "Built-In Filters in Vue.Js",
 mytext: "Filters in vuejs with example"
 };
 }
};
</script>

Uppercase

The uppercase filter is used to convert the text to the capitalized format for all of the characters into the string. We just need to provide the string along with the filter name like this.

Syntax
 <div>
 {{ mytext | uppercase }}
 </div>
Example
<template>
<div class="hello">
 {{ title }}
 <div>
 {{ samllText | uppercase }}
 </div>
</div>
</template>

<script>
export default {
name: "BuiltInFilters",
data() {
 return {
 title: "Built-In Filters in Vue.Js",
 samllText: "Filters in vuejs with example"
 };
}
};
</script>

Lowercase

The lowercase filter is used to convert the complete string into the lower characters. For that, we can use ‘lowercase’ as a filter type as described below.

Syntax
 <div>
 {{ mytext | lowercase }}
 </div>
Example
 <template>
 <div class="hello">
 {{ title }}
 <div>
 {{ mytext | lowercase }}
 </div>
 </div>
 </template>
 
 <script>
 export default {
 name: "BuiltInFilters",
 data() {
 return {
 title: "Built-In Filters in Vue.Js",
 samllText: "Filters in vuejs with example"
 };
 }
 };
 </script>
 

Currency

Currency filter allows us to play with the currency related operation which includes adding various currency symbols prefix or postfix to the actual currency value. We can simply use currency pipe or else we can also specify the additional argument along with the filter name as described below.

Syntax
 <div>
 {{ mytext | currency }}
 </div>
Argument

It accepts one additional argument to specify the currency symbol like that.

<div>
 {{ mytext | currency:'$'}}
 </div>
Example
 <template>
 <div class="hello">
 {{ title }}
 <div>
 {{ totalAmount | currency:'$'}}
 </div>
 </div>
 </template>
 
 <script>
 export default {
 name: "BuiltInFilters",
 data() {
 return {
 title: "Built-In Filters in Vue.Js",
 totalAmount: "25895.35"
 };
 }
 };
 </script>
 

Pluralize

Pluralize filter is used to convert the text from singular to the plural based on the argument passed either singular or plural. For that, we need to pass an additional argument as described below.

Arguments

If the item is single at that time Pluralize filter adds the ‘s’ character at the end of the value. And if items are multiple than it will add different postfix character based on the sequence they are coming.

Example
 <template>
 <div class="hello">
 {{ title }}
 <div>
 {{ mytext | pluralize 'value' }}
 </div>
 </div>
 </template>
 
 <script>
 export default {
 name: "BuiltInFilters",
 data() {
 return {
 title: "Built-In Filters in Vue.Js",
 mytext: "Convert to Pluralized"
 };
 }
 };
 </script>
 

So after running the above example, we will get the output like this.

  • 1 value

  • 2 values

    And so on based on the sequence of items.

Json

Json filter is used to format the JSON code to represent the file as a string including the trailing and remaining spaces. It accepts the complete JSON object which contains the data in the specific JSON format.

Argument

It also accepts one additional argument which is used for allowing the spaces.

 <div>
 {{ data | json 4 }}
 </div>

As you can see that we have used ‘4’ which specify the indent level of spaces, thus we can specify other digits as per our requirement. Keep in mind that the default indent space level is ‘2’.

Example
 <template>
 <div class="hello">
 {{ title }}
 <div>
 {{ data | json 8 }}
 </div>
 </div>
 </template>
 
 <script>
 // JSON data file
 import data from "./data";
 export default {
 name: "BuiltInFilters",
 data() {
 return {
 title: "Built-In Filters in Vue.Js",
 myJson: data
 };
 }
 };
 </script>
 

filterBy

FilterBy filter is used to filter the array based on the search term which can be changed by the user. And based on the value from the input control, it will be searched from the array for the results. For that, we need to provide the additional argument of a search term along with the filterBy filter as described below.

Syntax
 <div v-repeat="array } filterBy search_term">
 // content
 </div>

Here, search_term is the value of the item to be searched from the available array and based on a search result, it will return the unique result which matches with the specified search term.

Example
 <template>
 <div class="hello">
 {{ title }}
 <div>
 <input
 type="text"
 v-model="searchTerm"
 />
 <ul>
 <li v-repeat="employees | filterBy searchTerm">{{ fullName }}</li>
 </ul>
 </div>
 </div>
 </template>
 
 <script>
 import data from "./data";
 export default {
 name: "BuiltInFilters",
 data() {
 return {
 title: "Built-In Filters in Vue.Js",
 employees: [
 { fullName: "hello1" },
 { fullName: "hello2" },
 { fullName: "hello3" },
 { fullName: "hello4" },
 { fullName: "hello5" }
 ],
 searchTerm: ""
 };
 }
 };
 </script>
 

orderBy

OrderBy filter is used to change the order of the different array items either ascending or descending format. Keep in mind that the orderBy filter only works for Array items and not others. We can also specify the specific column from the array in order to sort the items column wise. For that, we need to specify the different arguments which are described below.

Arguments
  • Field : A string value which is used to order a specific column from the array

  • Reverse : It is an optional argument which is used to reverse the current set of items than the existing one

The default order of the sorting criteria is ‘ascending’ order but later we can change it to the desired format.

Syntax
 <element v-repeat="employees | orderBy 'fullName' reverse">
 // content to be placed
 </element>
Example
 <template>
 <div class="hello">
 {{ title }}
 <div>
 <ul>
 <li v-repeat="employees | orderBy 'fullName' reverse">{{ fullName }}</li>
 </ul>
 </div>
 </div>
 </template>
 
 <script>
 import data from "./data";
 export default {
 name: "BuiltInFilters",
 data() {
 return {
 title: "Built-In Filters in Vue.Js",
 employees: [
 { fullName: "hello1" },
 { fullName: "hello2" },
 { fullName: "hello3" },
 { fullName: "hello4" },
 { fullName: "hello5" }
 ]
 };
 }
 };
 </script>
 

Custom Filter

We have learned that what are the in-built filter and how to use them in Vue, but what if the in-built filter does not fulfill our requirement. At that time, the custom filter is used which allow us to create our custom filter based on our various requirements. In order to create the custom filter, we need to make use of filters option in the component like this.

 <script>
 import data from "./data";
 export default {
 name: "CustomFilters",
 data() {
 return {
 title: "Custom Filters in Vue.Js",
 mytext: "Custom Filters in vuejs with example"
 };
 },
 // Custom filter function
 filters: {
 // function implementation
 }
 };
 </script>

As you can see into the above example, we have a separate section for the “filters” in which we can define and implement various custom filters based on our requirement. For that, we just need to create separate functions for each custom filters and apply them to the HTML elements. Let’s create one simple example which shows the demo that how to convert simple text to upper case format using a custom filter.

Example
 <template>
 <div class="hello">
 <div>
 Before applying filter : {{ mytext }}
 </div><br /><br />
 <div>
 After applying filter : {{ mytext | toupper }}
 </div>
 </div>
 </template>
 
 <script>
 export default {
 name: "CustomFilters",
 data() {
 return {
 title: "Custom Filters in Vue.Js",
 mytext: "Custom Filters in vuejs with example"
 };
 },
 // Custom filter function
 filters: {
 toupper: function(val) {
 return val.toUpperCase();
 }
 }
 };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 </style>
 

In this example, we have one simple string message, which we are going to bind it into the HTML element. We have used the same string value twice in order to show the different like before applying the “toupper” filter and the after effect of applying our custom filter. In order to convert the normal text to capitalized, we have created a custom directive like this.

 filters: {
 toupper: function(val) {
 return val.toUpperCase();
 }
 }

Where “toupper” is our custom filter name and as an argument, we are passing the string value, in which we are going to convert the text into the capitalized format. After creating the custom filter, we need to apply it to the HTML element like this.

 <div>
 After applying filter : {{ mytext | toupper }}
 </div>

Now we are done with the simple example, now let’s run this and see the difference.

As we can see, the before and after effect by specifying the custom filter “toupper” which converts the text from normal case to the upper case text. This is how we can create our custom filter and apply it to the template easily in a step by step manner.

Chaining of Filters

Now we know that what is Filter, custom Filter and its implementation, but what if we want to apply multiple behaviors to the single HTML element. For that Chaining of Filters will let us do the same by allowing chaining of filters using the same HTML element. In order to implement chaining of a Filters, we can use multiple pipe (|) symbols along with the different names of Filters.

Syntax
 <element >
 {{ text | Filter1 | Filter2 | FilterN }}
 </element>

This is how we can use multiple pipe symbol along with the different Filters and will be able to format the string based on different requirement. Now let’s implement a simple example which shows the use of chaining of pipes using Custom filters.

Example
 <template>
 <div class="hello">
 Without toupper filter : {{ message }} <br /><br />
 With toupper filter : {{ message | toupper | greeting }}<br /><br />
 </div>
</template>

<script>
export default {
 name: "ChainedFilter",
 data() {
 return {
 message: "Simple example of chained filters in vuejs"
 };
 },
 filters: {
 toupper: function(val) {
 if (!val) return "";
 val = val.toString();
 return val.toUpperCase();
 },
 greeting: function(val) {
 if (!val) return "";
 val = "Hello " + val.toString();
 return val;
 }
 }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

Explanation

Here in the above example, we have used one simple data variable called “message” which we are going to bind in Vue template. The string is in the lowercase format, but now we want to convert it to the upper case format, and for that, we have created two different filters which are listed below.

toupper()

This filter will convert the string into the upper case characters based on the argument to be passed.

 toupper: function(val) {
 if (!val) return "";
 val = val.toString();
 return val.toUpperCase();
 },
 

greeting()

This filter is used to add the greeting message before the message / string.

 greeting: function(val) {
 if (!val) return "";
 val = "Hello " + val.toString();
 return val;
 }

In short, we are going to combine the two different custom pipes into the single HTML element, which is called “Chaining of pipes”. After creating all the custom pipes, now it’s time to use it into the template like this.

 <template>
 <div class="hello">
 Without toupper filter : {{ message }} <br /><br />
 With toupper filter : {{ message | toupper | greeting }}<br /><br />
 </div>
</template>

Here is the template, we have compared the two different output like before applying the chained filter and without using chained filters. After applying all of the filters, we will get the output like this.

As you can see into the above snap, that we’ve got the output in which the chaining of pipes works exactly as we want. Before the actual string message, we have “Hello” as greeting message which is the result of our Greeting custom pipe, and another pipe which we have created to convert the string to upper case. This is how we can create the Chaining of pipes either using in-built pipes or using the Custom pipes.

Passing arguments to the filters

We have learned how to use filters, but you will be surprised that we can also pass the arguments to the filters. This is just because at the end Filter is a kind of JavaScript function so that it can accept the different method arguments. In order to pass the arguments, we can use the following syntax.

Syntax
 <element>
 {{ value | filter_name(arg1, arg2, ...argN) }}
 </element>
 

Along with the name of the filter, we have specified the arguments like arg1, arg2 and the N numbers of arguments. And the argument will be processed further and will return the result based on the business logic.

Note

For passing the value, the actual “value” will the first argument for the filter function by default, and the rest of the arguments will be acts as additional arguments.

Example
 <template>
 <div class="hello">
 Total is : {{ value | addition(25) }}
 </div>
</template>

<script>
export default {
 name: "PassingArgumentToFilter",
 data() {
 return {
 message: "Passing arguments to the filters in vuejs",
 value: 25
 };
 },
 filters: {
 addition: function(val1, val2) {
 let val3 = val1 + val2;
 return val3;
 }
 }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

Explanation

We have one data variable called “value” which can be used to bind into the Vue template.

 data() {
 return {
 message: "Passing arguments to the filters in vuejs",
 value: 25
 };
 },

And we have specified the Filter called “addition” which accepts the different argument and will return the total of numbers.

 filters: {
 addition: function(val1, val2) {
 let val3 = val1 + val2;
 return val3;
 }
 }

Now after creating the filter function, we can use this filter function into out Vue template like this.

 <template>
 <div class="hello">
 Total is : {{ value | addition(25) }}
 </div>
 </template>

With the addition filter function, we have provided additional argument ‘25’ and it will automatically get the first argument as “25” because filter function gets the bind value itself every time. Now we are done with this example, let’s run this example and see the output.

We got 50 as output, because we have data variable value which is 25 and it will be a first default argument, and another additional argument that we have provided is 25. So in the end, we will get the addition of two numbers.

Summary

In this part of the Vue tutorial, we have learned the tactics about the Filters and covered below points, so let’s recap it.

  • Introduction to Filters in Vuejs

  • Ways to create the Filters

  • How to use filters in Vue template

  • In-Built Filters

  • Custom Filter

  • Chaining of a Filters

  • Passing arguments to the Filters

    By using the Filters, we can easily format the text and can change the custom behavior to the different HTML elements, I hope it will help you to be familiar with the Filters in Vuejs while learning through.

Learn to Crack Your Technical Interview

 
Learn to Code

Start your journey today to learn coding!


Because learning to code is the first step and foreward to advance your career.


 GET STARTED NOW 

+
+
Accept cookies and close this message