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.

You might also enjoy

  • Useful command line MySQL commands

    Posted on 5th July 2020.

    It seems I have been doing a lot of command line work on Debian with MySQL recently and have been having to search the internet (or my bash history) every time I need to do something. Here is a collection of commands I have been using…

  • The Git Commit Hash

    Posted on 28th May 2020.

    The magic 40 character string that is attached to every commit you do. What is it, where does it come from and will understanding it help you with Git in the future?…

  • Why should you consider Cloudflare for your website?

    Posted on 20th April 2020. Written For Liquid Light

    Cloudflare is a service which, among other things, provides a CDN (Content Delivery Network), firewall, and performance layer for your website. It has plenty of paid upgrades and features and is a developer’s dream, but what advantage does it have for you to put your website “behind” Cloudflare and how…

    Web
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.