如何重构一个数据对象，允许其内部一个计算属性

Question

我试图写在VueJS一些相当简单的验证逻辑，并在一个看似简单的问题，迷迷糊糊我有一个很难找到了一个合适的解决方案。

在我的Vue组件我有一个数据对象，它是一个简单的表格类实例。

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类有一个包含在表单的输入域的错误的错误性质。以确定是否存在错误对于给定的字段，被添加了“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"
}