Как провести рефакторинг объекта данных, чтобы учесть вычисляемое свойство на его внутренних объектах

Question

Я пытался написать довольно простую логику проверки в VueJS и наткнулся на кажущуюся простой проблему, для которой мне трудно найти подходящее решение.

В моем компоненте Vue у меня есть объект данных, которыйпростой экземпляр класса Form.

export default {
    data: function () {
        return {
            form: new Form([
                { email: '' },
                { password: '' },
            ]),
        }
    },
    methods: {
        handleSubmit () {
            // A callback in which an API request is performed using something like Axios.
            this.form.submit((data) => performApiRequest(data));
        },
}

Этот класс Form имеет свойство errors, которое содержит ошибки для полей ввода в форме.Чтобы определить, присутствует ли ошибка для данного поля, добавлен метод hasError.

export default class Form {
    constructor (fields = {}) {
        this.fields = fields;
        this.errors = {};
    }

    hasError (error) { return this.errors.hasOwnProperty(error); }

    submit (action) {

        action(this.fields)
            .catch((error) => {
                this.errors = error.response.data.errors;
            });
    }
}

В шаблоне компонента мы проверяем ошибки следующим образом:

<input type="email" v-model="form.email">
<span class="error" v-if="form.hasError('email')">{{ form.errors.email }}</span>

Все это прекрасно работает, но всякий раз, когда изменяется одно из входных значений в моей форме, метод hasError запускается для всех полей.Поэтому, если мы добавим 20 полей ввода с 20 интервалами ошибок, этот метод будет вызван 20 раз при вводе одного символа в любом из полей ввода.

Это имеет смысл, поскольку hasError не является вычисляемым свойством, итаким образом, не обладает преимуществом кэширования, которое имеет вычисляемое свойство.

Мне трудно понять, как реорганизовать это, чтобы воспользоваться преимуществами какой-либо формы кэширования, учитывая, что я хочу, чтобы класс Form можно было использовать повторно.по нескольким компонентам.

Как можно реализовать эту функциональность многократно?

Answer 1

Вы можете сделать каждое поле формы объектом со значением и ключом ошибки.

{ value: "thevalue", error: "some error" }

Затем в своем шаблоне используйте

<input type="email" v-model="form.email.value">
<span class="error" v-if="form.email.error">{{ form.email.error }}</span>

Это также позволит вамиметь валидацию для каждого поля или другое поведение

{ 
  value: "thevalue",
  error: "some error",
  validations: [<array of validation functions>], // like minLength/maxLength,
  // built-in validations for some common types 
  // like email or isDigits or alphanumeric etc
  type: "email"
}