Привязка класса vue к переменной объекта
У меня есть проект, в котором мне нужно выполнить проверку формы. Если поля введены неправильно, объект formErrors получит строковую переменную с правильным текстом ошибки. Таким образом, в случае электронной почты строка ошибки будет помещена в formErrors.email. Эта строка может быть распечатана в элементе p, который показывает ошибку, даже видимость этого элемента p может быть показана или скрыта в зависимости от состояния formErrors.email, например v-if = "formErrors.email".
Но когда я пытаюсь придать элементу ввода красный цвет границы с помощью :class = "{formErrors.email : text-red-primary}", линтер выдает ошибку Parsing error: Unexpected token .. Но как включить привязку этого класса к переменной внутри объекта formErrors.
<input
type = "text"
name = "email"
id = "email"
v-model = "email"
placeholder = "Email address"
class = "w-full px-4 py-3 border rounded-lg text-black-primary focus:outline-none text-sm"
:class = "{formErrors.email : text-red-primary}"
/>
<p v-if = "formErrors.email" class = "text-red-primary text-xs mt-1 ml-1">{{formErrors.email}}</p>
</div>
Ответы 2
Вы можете создать вычисляемое свойство, скажем, isEmailInValid, которое возвращает true/false
И используйте его в таком шаблоне
:class = "{'text-red-primary': isEmailInValid}"
Динамический класс применяется только тогда, когда условие истинно.
Вы можете проверить документы vue для получения дополнительной информации https://v2.vuejs.org/v2/guide/class-and-style.html
Ваша привязка класса в настоящее время обратная: ключ должен быть именем класса, а значение должно быть истинным/ложным (например, непустая строка будет правдивой). Кроме того, ключ (text-red-primary) необходимо заключить в кавычки, поскольку он содержит не буквенно-цифровые символы (-):
<!-- ❌ -->
<input :class = "{ formErrors.email : text-red-primary }">
<!-- ✅ -->
<input :class = "{ 'text-red-primary' : formErrors.email }">