Vue JS динамическое обновление установить / сбросить класс

Question

У меня есть несколько входов с кнопкой отправки.Иметь некоторую логику проверки, которая добавляет класс «has-error» для ввода.Как я могу снять фокус с этого класса?

Шаблон:

<div class="input-styled badge-icon" :class="{ 'has-error': errors.email}">
    <input type="text" @focus="delete errors.email" v-model="email" placeholder="example@gmail.com">
</div>
<button @click="submit">Submit</button>

JS

data() {
    return {
        errors: {},
        email: ''
    }
},

methods: {
    submit(){
        this.errors = {};
        if(!this.email){
            this.errors.email = 'Something';
        }
    }
}

I 'Я пытаюсь удалить свойство error, пытаюсь @ focus = 'errors.email = "" ", но класс has-error исчезает только тогда, когда я что-то набираю на входах.Событие @focus работает, и я думаю, что я должен вызвать некоторую функцию, которая обновит мой DOM?

Answer 1

Хорошей практикой является перемещение операций с данными компонента в функции.Вы можете добиться желаемого сброса проверки, создав функцию resetValidation и привязав ее к событию фокусировки в поле ввода.

Сам метод должен сбросить поле errors до ложных значений.Пример ниже предполагает, что в форме есть несколько полей ввода.Каждое поле должно вызывать resetVlidation метод с соответствующим именем поля ошибки.Если поле не указано, мы можем сбросить проверку в целом:

resetValidation (field) {
  if (field) {
    this.errors = {
      ...this.errors,
      [field]: ''
    }
  } else {
    this.errors = {}
  }

Пожалуйста, проверьте приведенный ниже рабочий пример:

codesandbox