Как по событию @blur добавить класс и отобразить скрытый элемент?

Question

[nastya_zholudeva]

Нужно чтобы если email введен не корректно показывался span и input добавлялся класс input_error. Все это должно происходить по событию @blur. Попробовала сделать на jQuery, но класс input_error не добавляется. Да и в целом хочется сделать на чистом Vue

<input class="no" type="text" name="log_in" id="log_in" placeholder="E-mail..." required v-model="login" :class="{ input_error: checkmail.error}" @blur="verificateLogin()">
<span  class="error valid">E-mail введен не корректно</span>

var emailRE = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

verificateLogin() {
                authParams['email'] = this.login;

                myObject.callApiPost('auth/checkmail', authParams, '').then((res) => {
                    this.checkmail = res.data;
                });

                if (!emailRE.test(this.login)) {
                    $('.valid').show();
                    console.log($('#log_in'));
                    $('#log_in').addClass('input_error');
                } else {
                    $('.valid').hide();
                }
            },

Comments

[numfin]

Это п*ц, товарищи

[nastya_zholudeva]

numfin, благодарю за ответ, но он мне не помог

[numfin]

nastya_zholudeva, чтение документации (первых трех страниц) должно было помочь

Answer 1

[0xD34F]

data: () => ({
  value: '',
  error: false
}),
methods: {
  checkValue() {
    this.error = в зависимости от this.value;
  }
}

<input v-model="value" :class="{ error }" @blur="checkValue">
<span v-show="error">ошибка</span>

.error {
  border-color: red;
}

https://jsfiddle.net/ujr0bgLv/

Comments

[nastya_zholudeva]

0xD34F, спасибо большое)))))