Как не присваивать класс, если значение переменной null?

Question

[VegasChickiChicki]

Суть вот в чем, у меня есть форма, и в ней поля ввода, после того как пользователь уберет фокус с поля ввода, мне нужно проверить ее и изменить значение соответствующего поля в data, например form.name = false. Верну ложь, если поля заполнено не верно, и на основе этих переменных мне нужно присвоить класс, класса 2, на ошибку и на верный ввод, но пока пользователь не трогал поля, классов быть не должно.
Сейчас вот так попытался сделать:

:class="form.FirstName ? 'input-successes' : 'input-error'"
//даже так
v-bind:class="{ 'input-successes': form.FirstName, 'input-error': !form.FirstName, '':  form.FirstName === null }"

Но что-то всегда null приравнивает к false, не знаю как это исправить, прошу помощи, спасибо!

Answer 1

[0xD34F]

:class="form.FirstName !== null ? form.FirstName ? 'input-successes' : 'input-error' : ''"

или

:class="{ 'input-successes': form.FirstName, 'input-error': form.FirstName === false }"

или

:class="form.FirstName !== null && [ 'input-error', 'input-successes' ][+form.FirstName]"

или

:class="({ true: 'input-successes', false: 'input-error' })[form.FirstName]"

Лучше бы подобное конечно в computed/метод завернуть, как-то громоздко получается.

Comments

[VegasChickiChicki]

Работает, огромное спасибо, впервые вижу такое выражение длинное... Пытаюсь понять как оно работает...

[VegasChickiChicki]

Второй пример самый понятный для меня, спасибо!