Understanding Filters in Vue.js
A hands-on intro to controlling the presentation of your data in the client side- with illustrations.
Vue JS is a very progressive framework for building user interfaces created by Evan you and some community lovers with more than 121,000 stars on GitHub. It consists of an approachable core library that focuses on the view layer only, and an ecosystem of supporting libraries that helps you tackle complexity in large Single-Page Applications. In this post, you will be introduced to an exciting concept, filters which will help you build mastery in presenting data in Vue JS.
Before you start
This post is suited for intermediate frontEnd developers that use Vue JS, and so being conversant with beginner concepts and installation processes is assumed. Here are a few prerequisites you should already have before you start to use Vue CLI 3 through this article.
You will need:
- Node.js 10.x and above installed. You can verify if you do by running node -v in your terminal/command prompt.
- The Node Package Manager 6.7 or above (NPM) also installed.
- A code editor: Visual Studio Code is highly recommended. (here’s why)
- Vue latest version installed globally on your machine.
- Vue CLI 3.0 installed on your machine. To do this, uninstall the old CLI version first:
npm uninstall -g vue-clithen install the new one:
npm install -g @vue/cliOR
- Download a Vue starter project here
- Unzip the downloaded project
- Navigate into the unzipped file and run the command to keep all the dependencies up-to-date:
npm installWhat are filters?
As the name suggests, filters are data presentation tools used to filter data on the DOM level, this means that the data is still in tact in the stores but is now shown in a custom specified manner which is not necessarily the way it was originally stored in the data store.
Tip: As I’ll explain later on, in this post, writing presentable code for your user interface is highly advisable — whether it is Vue or any other JS framework. Use Bit to easily make your app’s modules shareable and reusable across apps.
Why are Vue Filters important?
- Enhancement of the presentation: Vue JS is laser focused on the view layer of your application so it only makes sense that tools that enable you exert full control of the view layer is readily available for you to use at all times.
- It is reusable: as you will later see in the demonstration stage of this application, you can declare a filter to be globally available and then you just use it in any desired component of choice inside the project. This is really important for efficiency and use of resources.
- Data formatting: Filters were built to equip you the developer with powers to be able to format your data at the view level. You know for instance when you make a HTTP get request, you can specify how the data should look in the template level. With filters, you can go a step further to still format that in the DOM itself.
Filters Syntax
filters: { capitalize: function (value) { if (!value) return ‘’ value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) }}
It always has a function, the filter’s function always takes the expression’s value (the result of the former chain) as its first argument. In the above example, the capitalize filter function will take the value of message as its argument. It is written just as you will write a method, or even a computed property.
Here, capitalize is the filter name and it has a function which takes value as argument. The filter simply transforms the very first letter of any string it is attached to, to uppercase.
Types of Filters
There are about two ways a filter can be scoped:
- A filter can be scoped locally.
- A filter can be scoped globally.
Global Filters
These are the filters that you specify in the Vue application instance, if your application is in a Vue project then that will be located in the main.js file where the Vue application is initiated to render. The syntax is a little different from the locally defined one, it looks like this:
Vue.filter(‘capitalize’, function (value) { if (!value) return ‘’ value = value.toString() return value.toUpperCase()})
The function in this one transforms everything inside the value to upper case letters.
Local Filters
These ones are the type of filters scoped to the particular component they are defined in. Just like Vue handles global and local styling, that is the same central idea with filters. The syntax which you should be familiar with by now looks like this:
filters: {
capitalize: function(value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}Demo: what you will build
This is a simple v-model binding demo application which will be used to display the power and importance of filters for your user interface design in Vue.
If you followed this post from the start, you must have downloaded the Vue canvas application from my GitHub page. Copy the code below into the script section where our data is initialized and our filter is defined.
<script>
export default {
name: 'Test',
data() {
return {
selected: '',
first_name: '',
last_name: ''
}
},
filters: {
capitalize: function(value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
}
</script>You can see that the filter defined here is locally scoped inside the test component. The function converts the first character of the string in the value to a capital letter.
Navigate to the Test.vue file in the src folder and copy the code below into the template section.
<template><div><h2>The Register</h2><p>A simple v-model register for binding your full name. </p><select v-model="selected"><option disabled value="">Select Title</option><option>Mr.</option><option>Mrs.</option><option>Miss. </option></select><span>{{ selected }}</span> <br><input type="text" v-model="first_name" placeholder="Enter first name"><p>{{first_name}}</p><input type="text" v-model="last_name" placeholder="Enter last name"><p>{{last_name}}</p><button>Output Full Name</button><p>{{selected |capitalize}} {{last_name |capitalize}} {{first_name |capitalize}}</p></div></template>
Pay close attention to the characters in bold, you will notice a pipe symbol. Filters are denoted in the template with the pipe symbol in Vue JS. This makes it different in application from a related concept like computed properties. Finally, to update the stylesheet, copy the code below to the scoped style section:
<style scoped >
p {
font - size: 22 px;
}
a {
color: #42b983;
}
button {
background-color: rgb(58, 128, 194);
border: none;
color: white;
padding: 15px 32px;
margin: 5px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 18px;
}
input[type= text] {
width: 40 % ;
padding: 10 px 18 px;
margin: 6 px 0;
box - sizing: border - box;
font - size: 18 px;
}
select {
width: 20 % ;
padding: 10 px 18 px;
margin: 6 px 0;
box - sizing: border - box;
font - size: 16 px;
}
</style>If you run your application at this point, you will see it looks exactly like the demo video above.
npm run serveTo also test out the global filter concept, first comment out the local definition in the Test.vue file:
// filters:{//capitalize: function (value) {//if (!value) return ‘’//value = value.toString()//return value.charAt(0).toUpperCase() + value.slice(1)//}//}
Then navigate to your main.js file inside the src folder and copy the code below inside it just before the render statement:
Vue.filter(‘capitalize’, function (value) {if (!value) return ‘’value = value.toString()return value.toUpperCase()})
Run your application again and see that it runs as expected, just like it did with the local definition. This time around, everything is in capital letters.
The full code to this tutorial can be found here on GitHub.
Conclusion
You have been introduced to filters in Vue JS and how vital they are in user interface design for your application. The limits of the application of filters depend on you the developer as you can come up with creative ways of formatting data with this new platform. Follow me and check out the blog for more Vue concept articles. Thanks for reading! 🍺 😃
