Skip to content
Related Articles

Related Articles

Improve Article

Vue.js Placeholder using filters

  • Last Updated : 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=
    </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




My Personal Notes arrow_drop_up
Recommended Articles
Page :