Adding Filters in VueJS - GeeksforGeeks

20 Nov, 2020
A Filter is a simple JavaScript function which is used  to change the output of a data to the browser. Filters in Vue.JS don’t change the data directly wherever we store them, it only applies formatting to our data. The data remains the same only the output of a data to a browser is changed. Vue.JS doesn’t give these filters by default, so we have to make these filters. With Vue.JS , we can use filters in two different ways i.e. Global filter and Local filter. Global filter provides access all the components while Local filter only allows us to use our filter inside the component it was defined.
Prerequisites: Basics of Vue.JS
Approach: Below all the steps are described order wise to create Filters in Vue.JS .
Step 1:  Firstly if we want a global filter, we register it by Vue.filter() method
Step 2: Now  we add Vue.filter() method in the index.js file . This filter function takes a value as the argument and then returns the filter or the transformed value .
Vue.filter('uppercase', function(value));

Step 3: This function will be executed by Vue.JS whenever this filter is applied to something. This function will automatically receive one input one argument and that’s the value . Vue.JS will pass this value to this function automatically and this will be the value on which we apply this filter.
Step 4: Now we return the filter or the transformed value.
Vue.filter('uppercase', function (value) {
  return value.toUpperCase();
});

Step 5: Now go to your template and simply add the filter by adding a pipe symbol and then the name of the filter. Syntax to apply a filter is
{{ title | filtername }}

Below is a sample program to illustrate the above approach:
Global Filter: The scope of global filter is throughout our Vue app.
Example 1: In the below program, we will reverse a given string using global filter.
main.js
Javascript
// GLOBAL FILTER// In this example, we are // creating a filter which// reverses the given stringimport Vue from "vue";  // Importing App.vueimport App from "./App.vue";  // DeclarationVue.filter("reverseString", function (value) {    return value.split("").reverse().join("");});  new Vue({    render: (h) => h(App)}).$mount("#app");
App.vue
HTML
<!--Template--> <template>  <div id="app">          <!--Applying filter-->    <h1>{{ name | reverseString }}</h1>  </div></template>  <script>export default {  data: function () {    return {      name: "GEEKSFORGEEKS",    };  },};</script>
Output
Local Filter: The scope of local filter is within a component.
Example 2: In the below program, we will change given string to uppercase using local filter.
App.vue
Javascript
<!-- Local filter in VueJS --><!-- Template --><template>  <div>        <!-- Applying Uppercase filter -->    <h1>{{ name| uppercase }}</h1>  </div></template>  <!-- Filter defined locally --><script>export default {  data: function() {    return {      name: "geeksforgeeks"    };  },  filters: {    uppercase: function(value) {      return value.toUpperCase();    }  }};</script>
Output
Vue.JS
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
Remove elements from a JavaScript Array
How to get character array from string in JavaScript?
How to filter object array based on attributes?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?