javascript - 如何重构数据对象以允许其内部的计算属性

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

您可以使 Form 的每个字段成为具有值和错误键的对象。

{ 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"
}