RumusBin
@RumusBin
Живу, учусь, не стесняюсь

Как анимироать error message в форме на Vue js?

Доброго времени суток. Суть вопроса такова, что есть форма на одностраничнике которая всплывает в модальном окне.
Форма создана с использованием библиотеки Vue (так как есть желание ее освоить), Но в силу малого опыта не могу "запилить" одну "фичу", а очень хочу.
К делу :
код компонента формы (частично ибо стыдно показывать, что я там "налапшегонил")
<template>
//create an animation of the appearance - the disappearance of the form
    <transition  name="fade"
                 enter-active-class="animated bounceInUp"
                 leave-active-class="animated bounceOutRight"
    >
.... //here is the form code
// пример одного поля
 <div class="row">
                        <div class="input-field " :class="{'wrong-input': isWrongName}">
                            <i class="material-icons prefix small">child_care</i>
                            <input class="input" type="text" id="name" name="name" v-model="name" @change="nameValidation">
                                <span v-if="errorMessages.poorName">{{errorMessages.poorName}}</span>                            
                            <label for="name">Ваше имя:</label>
                        </div>
                    </div>

....//here too the code
</transition>
</template>

Выше приведен пример одного поля в котором есть span с условием v-if которые появляются при заполнении "errorMessages.emptyName" (ну это понятно)
есть метод этого компонента который отвечает за валидацию данного поля выглядит он так:
nameValidation () {
                if(this.name.length < 2){
                    this.isWrongName = true;
                    this.errorMessages.poorName = errorMessagesLocale[locale].poorName;
                }else{
                    this.isWrongName = false;                  
                    this.errorMessages.poorName = '';
                }
            }

Все работает, т. е. при несоответствии условию сообщение появляется, и класс ошибки тоже "биндится" к блоку инпута, все становится красным ))), но хотелось бы анимировать данный эффект. Я использую Css библиотеку Animate.css (как понятно из тэга формы), и при появлении и исчезновении самой формы все работает отлично, а вот при появлении сообщений об ошибках не получается, они просто появляются и просто исчезают.
Пробовал "оборачивать" с этими месседжами в теги , но не срабатывает. понятно, что я что-то упускаю, а вот что не могу разобрать. Буду рад вашим советам, спасибо!!
  • Вопрос задан
  • 95 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы