Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to display space instead undefined and null in vue.js template?

This is Vue.js template

<strong>{{userdata.phone}}</strong>

When userdata.phone == null or userdata.phone == undefined, I would like to show space. for example

<strong> {{ userdata.phone | !null | !undefined }} </strong>

Is it possible? And in this case how do that?

<strong>{{userdata.location.city + userdata.location.state + userdata.location.country }}</strong>

userdata.locationi.city,state,country can be null or undefined

like image 928
Nomura Nori Avatar asked Sep 13 '17 07:09

Nomura Nori


2 Answers

Its important to understand the template syntax in vuejs is just javascript. This means any standard javascript statement will work in between the double curly braces.

The solution is to make use of Javascript's duck (dynamic) typing and to take advantage of the fact that a null or empty string also resolves to a false value.

The statement (userdata && userdata.phone) || '' is standard javascript and works as follows

  • if userdata is truthy (has a value) and also userdata.phone is truthy (is not null, has a length greater than zero, and some caveats), then this side of the || operator is true, so return this value
  • else the || is false, use this empty string literal ''

This may clutter up your template and you may prefer to place this in a computed property like so

<strong>{{userPhone}}</strong>

and

computed: {
    userPhone() {
        return (userdata && userdata.phone) || '';
    }
}

You will almost certainly want to follow a computed property strategy for the location. Note that a null value will return 'null' when used as part of string concatenation.

computed: {
    userLocation() {
        if (!userdata || !userdata.location) return '';
        return (userdata.location.city || '') + (userdata.location.state || '') + (userdata.location.country || '');
    }
}

A more concise option could be to use the join function of an array, which will ignore null or undefined values:

computed: {
    userLocation() {
        if (!userdata || !userdata.location) return '';
        return [userdata.location.city, userdata.location.state, userdata.location.country].join(' ');
    }
}
like image 173
James Westgate Avatar answered Nov 20 '22 22:11

James Westgate


The solution is the same as having a default fallback for values in regular Javascript.

<strong>{{ userdata.phone || " " }}</strong>

The same solution works for multiple fallbacks.

<strong>{{ userdata.location.city || userdata.location.state || userdata.location.country || " " }}</strong>

Alternatively, it can be handy to use a computed property for this if there's more complex logic involved or when you want to reuse it:

computed: {
  phone: function () {
    return this.userdata.phone || " ";
  }
}

If you're only targeting browsers that support nullish coalescing or use a build step that transpiles it for you, that's usually preferable.

<strong>{{ userdata.phone ?? " " }}</strong>
like image 18
Etheryte Avatar answered Nov 20 '22 20:11

Etheryte