Начальное состояние для девственного входа

Question

У меня очень простой ввод электронной почты, в который я динамически связываю класс CSS с отказом проверки.

Я использую флаг в состоянии для отслеживания его проверки или нет.

Очевидно, что по умолчанию он не проверяется. Однако довольно неприятно стилизовать ввод как неудачу с самого начала.

Я бы хотел, чтобы он не отображал ошибки проверки до внесения каких-либо изменений.

Очевидно, что это скорее вопрос дизайна, чем один, но я добавил свой код ниже для справки().

Как бы вы это сделали?

<template> 
    <p class="control has-addons"> 
    <input 
     v-model="email" 
     class="input is-large" 
     :class="{'is-danger': !validated}" 
     placeholder="Email"> 
    <a 
     @click.prevent="submitEmail" 
     class="button is-info is-large"> 
     Subscribe 
    </a> 
    </p> 
</template> 

<script> 
import { isEmail } from 'validator' 
export default { 
    data() { 
    return { 
     email: '', 
     validated: false 
    } 
    }, 
    methods: { 
    submitEmail() { 
     if (isEmail(event.target.value)) { 
     this.validated = true 
     this.$store.dispatch('submit_email', this.email) 
     } else { 
     this.validated = false 
     } 
    } 
    } 
} 
</script> 

Answer 1

Vue не предоставляет "dirty" checking.

Один из вариантов заключается в том, чтобы ваша электронная почта изменяла объект с свойством «грязный».

email: { 
     "value": null, 
     "dirty": false, 
     "validated": false, 
     }, 

Таким образом, ваш код будет легко отслеживать при добавлении дополнительных полей ввода.

Answer 2

Keep след еще один государственный ключ называется что-то вроде visited. Когда поле становится размытым, установите для посещения значение true. Обновите состояние своего класса до visited && !validated.

Это означает, что вы не начнете показывать состояние ошибки до тех пор, пока пользователь не сфокусируется, а затем отодвинется от поля, не заполнив его правильно.