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

Question

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

Answer 1

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(' ');
    }
}

Answer 2

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>