Vue.js Placeholder using filters

10 Mar, 2021
Vue.JS filters are a functionality provided by Vue components that let you apply formatting and transformations to any part of your template dynamic data. The filter property of the component is an object. A single filter is a function that accepts a value and returns another value. The returned value is the one that’s actually printed in the Vue.js template. Hereby a placeholder, we are concerned with if data is not coming in any function as required then the function is not executed accordingly and in our application (The Web Page), the place where function supposes to return something now become vacant. In these cases, we can use a placeholder(That can also use to provide some error message like data not received as excepted)
Example-1 (When Data present as expected): When data present as expected then output in screen comes to be as expected. If in a case our application internally not able to fetch data or it contains a null value or an empty value then the screen on that place does not seems to be empty otherwise user interface gets impacted. Here in the example, I am trying to show when default value(placeholder value) and when actual data.
index.html
<!DOCTYPE html><html lang="en">  <head>    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">    </script></head>  <body>    <div id='parent'>        <h3>Message From GeekforGeeks</h3>                  <p><strong></strong>{{ name | gfgMsg }}</p>    </div>    <script src='app.js'></script></body>  </html>
app.js
const parent = new Vue({    el: '#parent',    data: {        name: 'Techies!'    },      filters: {        gfgMsg: function(data) {            if (data.length === 0) {                return "Welcome to GeekforGeeks                Computer Science Portal,\n\                Explore yourself as much as you can!"            } else {                return `Hi ${data}, We hope you have                a very good memory,\n learning\                 with GeekforGeeks`            }        }    }})
Output :
Example 2(When data not present): In This case placeholder value that we set or can say default value shows on screen.
index.html
<!DOCTYPE html><html lang="en">  <head>    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">    </script></head>  <body>    <div id='parent'>        <h3>Message From GeekforGeeks</h3>                  <p><strong></strong>{{ name | gfgMsg }}</p>    </div>    <script src='app.js'></script></body></html>
app.js
const parent = new Vue({    el: '#parent',    data: {        name: ''    },      filters: {        gfgMsg: function(data) {            if (data.length === 0) {                return "Welcome to GeekforGeeks                 Computer Science Portal,\n\                 Explore yourself as much as you can!"            } else {                return `Hi ${data}, We hope you have a                 very good memory,\n learning\                with GeekforGeeks`            }        }    }})
Output:
Example 3 (When data present as expected): Actual data shows on the screen
index.html
<!DOCTYPE html><html lang="en"><head>    <script src= "https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">    </script></head><body>    <div id='parent'>        <h3>Pool Contest</h3>                  <p>{{ person | pool('Stefy') }}</p>    </div>    <script src='app.js'></script></body></html>
app.js
const parent = new Vue({    el : '#parent',    data:{        person : 'Mr./Mrs.',    },    filters:{        pool : function(data,name){            if(data.length != 0){                if(!name) {                    return 'Pool is open,                     register yourself soon.'                }else{                    return `Welocome ${name} to the pool,                     Your serial no: AXP100`                }            }            }    }})
Output:
Placeholder using filters:  When data present as expected
Example 4 (When data not present): Placeholder value that we set or can say default value shows on screen.
index.html
<!DOCTYPE html><html lang="en"><head>    <script src= "https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">    </script></head><body>    <div id='parent'>        <h3>Pool Contest</h3>                  <p>{{ person | pool }}</p>    </div>    <script src='app.js'></script></body></html>
app.js
const parent = new Vue({    el : '#parent',    data:{        person : 'Mr./Mrs.',    },    filters:{        pool : function(data,name){            if(data.length != 0){                if(!name) {                    return 'Pool is open,                     register yourself soon.'                }else{                    return `Welocome ${name} to the pool,                     Your serial no: AXP100`                }            }            }    }})
Output :
Placeholder using filters:  When data not present
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
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
Roadmap to Learn JavaScript For Beginners
JavaScript | Promises
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?