Filters in Vue.js: What are they, how do you use them, and how do you make them? (video)

I wrote a book about Vue.js! Vue.js 2.x by Example is available as from Packt and covers Vue, Vuex and VueRouter.
Errata: Since I created the video there were a couple of bits I missed out. Head down to the errata section to read more

Using filters in Vue.js, you are able to manipulate the appearance of a variable without altering the actual value. This is done in the template by using the pipe (|) character. For example:

{{ message | lowercase }}

To create this filter, add a filters object to the Vue or component instance. Within this, create a new function which accepts one parameter and returns a value:

 new Vue({
el: '#app',

filters: {
lowercase(val) {
return val.toLowerCase();
}
},

data: {
message: 'Hello World'
}
});

With the basics of filtering under your belt, we can progress onto slightly more advanced filtering - with a more practical example.

VAT Calculator

A realistic example would be a VAT calculator. Wanting to use the percentage as a decimal (e.g. 20% = 0.2) but display in a user-friendly way, we can use filters to accomplish this.

The initial app JavaScript will look like the following:

new Vue({
el: '#app',

data: {
price: 0,
vat: 0.2
},

computed: {
amount() {
let price = parseFloat(this.price),
vat = price * this.vat;
return price + vat;
}
}
});

Create the HTML to match the JS. This should have an input field bound to the price variable using v-model, the VAT rate output (vat) and the amount variable being output

<div id="app">
Price ext vat: <input v-model="price">
<h3>Vat percent: {{ vat | percent }}</h3>
<h3>Price with vat: {{ amount | currency }}</h3>
</div>

On both the vat and amount variables, add filters for percent and currency respectively.

The percent filter will convert a decimal to a percent - by multiplying the amount by 100 and then adding a % sign.

The currency filter will use toLocaleString to convert the number to a human-readable price.

Within the app JavaScript, create two the two new filters and their functionality:

new Vue({
el: '#app',

filters: {
percent(val) {
return val * 100 + '%';
},

currency(val) {
return val.toLocaleString('en-GB', {
style: 'currency',
currency: 'GBP'
});
}
},

data: {
price: 80,
vat: 0.2
},

computed: {
amount() {
let price = parseFloat(this.price),
vat = price * this.vat;
return price + vat;
}
}
});

The VAT and amount now read a lot better, without the original values be altered.

Errata

A couple of differences/issues that have been pointed out/I've noticed with the video. Unfortunately, you can't re-upload Youtube videos and keep the same URL, so I will have to list them here:

Initialising

When initialising a Vue filter, you can either do it as described in the video, via an object on the Vue instance or component or, alternatively, you can use vue-filter - much as you would vue-component. An example of the percent one above would be:

Vue.filter('percent', function(val) {
return val * 100 + '%';
});

Variables & arguments

In the video, I state that filters only accept one argument - this is incorrect and they can, in fact, accept many. A use case would be if you didn't want to hardcode the GBP in the currency filter, you could pass this is as an argument like so:

<h3>Price with vat: {{ amount | currency('GBP') }}</h3>

With the javascript being updated as you would expect:

new Vue({
el: '#app',

filters: {
percent(val) {
return val * 100 + '%';
},

currency(val, currency) {
return val.toLocaleString('en-GB', {
style: 'currency',
currency
});
}
},

...
});

Using ES6, we do not need to specify currency: currency in the toLocaleString function.

This website is currently having a full content audit - apologies if some of the code or content looks a bit funky!

View this post on Gitlab

You might also enjoy…

Mike Street

Written by Mike Street

Mike is a front-end developer from Brighton, UK. He spends his time writing, cycling and coding. You can find Mike on Twitter.