Filters

Published on March 13, 2017 by

In this post we’ll be talking about something called filters. Filters provide a way to perform text transformation such as capitalizing letters or doing virtually anything we’d like. Filters can be used both within string interpolation, but also within the v-bind directive’s expression. As always, let’s dive straight into an example.

I have a message data property which I output using string interpolation. Suppose I want to output the message in all uppercase letters. The first thing I want to do, is to introduce a new top-level property on the Vue instance, namely the filters property.

filters: {

}

This property is semantically the same as the methods property, in that it takes filter names as keys and functions as the values. In this case, I want to add a filter named “uppercase,” so I’ll use this as the key. The value is a function, which receives the value to transform as its first argument.

filters: {
  uppercase: function(value) {
    if (!value) {
      return '';
    }
      
    return value.toString().toUpperCase();
  }
}

Using this filter is very simple. Simply add a pipe symbol (|) after the string interpolation expression, followed by the name of the filter. In this example, I will add a pipe followed by the name uppercase.

<h1>{{ message | uppercase }}</h1>

We will now see the message being displayed in uppercase letters. What happens is that the evaluation of the expression before the pipe – message in this case – is passed to the filter as the first argument, and the return value of the filter is then output.

Filters can actually be chained, so we could add another pipe and filter name after the one we have added already. The second filter would then receive the result of the first filter as its first argument. This is useful if you want to apply multiple transformations to your text, and this also allows you to keep filters very specialized, such that they only do one transformation each.

There’s one more thing I’d like to show you. Since filters are just JavaScript functions, we can actually use them as such. This allows us to pass in our own arguments in case we need some more flexibility. Let’s say that we want our filter to take an argument that decides whether or not only the first character should be uppercased instead of the whole string. To do that, we first need to add the parameter to the filter and make a few changes to the code.

filters: {
  uppercase: function(value, onlyFirstCharacter) {
    if (!value) {
      return '';
    }
      
    value = value.toString();
      
    if (onlyFirstCharacter) {
      return value.charAt(0).toUpperCase() + value.slice(1);
    } else {
      return value.toUpperCase();
    }
  }
}

Within the template, we can now use the filter as a normal function invocation and add our argument.

<h1>{{ message | uppercase(true) }}</h1>

Note that our argument is passed as the second argument, as Vue always passes the value to transform as the first argument.

Now we should only see the first character being uppercased. If we change the boolean to false, we should see a message in all uppercased letters.

We can pass any expression as arguments to our filter, be it the name of a data property, a shorthand if statement or a string.

That’s it for filters – that was pretty easy, right? Before ending this lecture, I just want to mention that filters are intended for transforming text, so if you need any complex data transformations, then you are usually better off using a computed property.

Featured

Learn Vue.js today!

Take an online course and become an Vue.js champion!

Here is what you will learn:

  • How to build advanced Vue.js applications (including SPA)
  • How Vue.js works under the hood
  • Communicating with services through HTTP
  • Managing state of large applications with Vuex
  • ... and much more!
Vue.js logo
Author avatar
Bo Andersen

About the Author

I am a back-end web developer with a passion for open source technologies. I have been a PHP developer for many years, and also have experience with Java and Spring Framework. I currently work full time as a lead developer. Apart from that, I also spend time on making online courses, so be sure to check those out!

One comment on »Filters«

  1. Sajid Latif

    Nice explanation :)

Leave a Reply

Your e-mail address will not be published.