Using Filters in Vue.js for Advanced Text Formatting

Filters are a functionality provided by Vue.js that allows us to define filters that can be used to apply common text formatting. Filters can be used in two places: v-bind expressions and mustache interpolation (the first is supported in 2.1.0+).

Filters do not change a component data, they only affect We should append Filters to the end of JavaScript expression, this is denoted the 'pipe' symbol:

<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>

We can define local filters in component options:

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

Or we can define a filter globally before creating the Vue instance:

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

The local filter is preferred when the global filter has the same name as the local filter.

The filter's function will always receive the expression's value (the result of the former chain) as its first argument. In the example above, the capitalize filter function receives the value of the message as its argument.

We can chain filters:

{{ message | filterA | filterB }}

In cases as this, filterA, which is defined with a simple argument, will receive the value of message above, and then the filter function will be called with the result of filterA passed into the single argument of filterB.

Since filters are JavaScript functions they can also take arguments:

{{ message | filterA('arg1', arg2) }}

In the example above filterA is defined as a function taking three arguments. The value of message will then be passed into the first argument. The plain string 'arg1'would be passed into the filterA as its second argument, and the value of arg2 will be evaluated and will be passed in as the third argument.

Advanced filters can accept parameters, using normal function parameter syntax:

HTML

<template>
  <p>Hi {{ name | prepend('Mr.') }}</p>
</template>

JS

<script>
export default {
  data() {
    return {
      name: 'Room'
    }
  },
  filters: {
    prepend: (name, prefix) => {
      return `${prefix} ${name}`
    }
  }
}
</script>

Note: we have to avoid using arrow function in computed properties and method generally because they will reference this to access the component data, however in the case above, the filter does not need access the this but receives all the data it needs through the parameters, hence we can safely use the simpler arrow function syntax.

Previous: Understanding and Using Plugins in Vue.js Development.
Next: Single-File Components in Vue.js: Benefits and Setup Guide