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= </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= </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= </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= </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
