Как отобразить пробел вместо неопределенного и нулевого в шаблоне vue.js?

Question

Это шаблон Vue.js

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

Когда userdata.phone == null или userdata.phone == undefined, я хотел бы показать пробел. например

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

Является ли это возможным? И в этом случае как это сделать?

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

userdata.locationi.city, штат, страна может быть нулевым или неопределенным

Answer 1

Решение такое же, как иметь запасной вариант по умолчанию для значений в обычном Javascript.

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

Одно и то же решение работает для нескольких откатов.

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

Answer 2

Для понимания синтаксиса шаблона в vuejs важно просто javascript. Это означает, что любой стандартный оператор javascript будет работать между двойными фигурными скобками.

Решение состоит в том, чтобы использовать преимущество утилитарной (динамической) типизации javascript и использовать тот факт, что нулевая или пустая строка также преобразуется в ложное значение.

Заявление (userdata && userdata.phone) || '' является стандартным JavaScript и работает следующим образом

• если userdata является правдивым (имеет значение), а также userdata.phone истинно (не равно нулю, имеет длину больше нуля и некоторые предостережения), то эта сторона || оператор равен true, поэтому верните это значение
• иначе || ложь, используйте этот пустой строковый литерал ''

Это может загромождать ваш шаблон, и вы можете разместить его в вычисляемом свойстве следующим образом

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

а также

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

Вы почти наверняка захотите следовать расчетной стратегии собственности для местоположения. Обратите внимание, что null значение вернется 'null' когда используется как часть конкатенации строк.

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

Более кратким вариантом может быть использование join функция массива, которая будет игнорировать null или же undefined ценности:

computed: {
    userLocation() {
        if (!userdata || !userdata.location) return '';
        return [userdata.location.city, userdata.location.state, userdata.location.country].join(' ');
    }
}