一个 vuejs 的 form 表单提交结构

在初学习Laravel的过程中，看过的教程肯定都有登陆这个表单提交操作，当提交错误的时候，系统会返回$errors，而我们可以根据$errors来显示在input框下面。

但是，在写vuejs的时候，我就感觉自己比较的混乱，就是直接判断status，如果不为1，则提取发送的json数据中的msg，也就是自己定义的msg。
这几天在看Laracast的Vue2教程中的Object-Oriented Forms给了我这个初学者很好的一个解答。

create.blade.php

<form method="POST" action="/projects" @submit.prevent="onSubmit" @keydown="form.errors.clear($event.target.name)">
            <div class="field">
                <label class="label">Name</label>
                <div class="control">
                    <input class="input" type="text" name="name" placeholder="input name" v-model="form.name">
                    <span class="help is-danger" v-if="form.errors.has('name')" v-text="form.errors.get('name')"></span>
                </div>
            </div>
            <div class="field">
                <label class="label">Description</label>
                <div class="control">
                    <input class="input" type="text" name="description" v-model="form.description" placeholder="input Description">
                    <span class="help is-danger" v-if="form.errors.has('description')" v-text="form.errors.get('description')"></span>
                </div>
            </div>
            <div class="control">
                <button class="button is-primary" :disabled="form.errors.any()">Save</button>
            </div>
        </form>

在这里面，介绍几个重点

@submit.prevent="onSubmit"调用，我们阻止了表单提交，调用了我们自有的onSubmit函数。
@keydown="form.errors.clear($event.target.name)"，这个用于输入时清空input框地下的错误提示

app.js
这边分为3个部分，Vue的代码，Form Class，Errors Class

new Vue({
    el: '#app',
    data: {
        form: new Form({
            name: '',
            description:'',
        }),
    },
    methods: {
        onSubmit() {
            this.form.post("/projects")
                .then(data => {
                    alert(data.message);
                })
                .catch(errors => {
                    console.log(errors);
                });

        },
    }
});

我们通过onSubmit调用Form的post函数，可以直接将Form表单中的参数name和description发送到"/projects"中

Form Class

class Form {
    constructor(data) {
        this.originalData = data;

        for (let field in data) {
            this[field] = data[field];
        }

        this.errors = new Errors();
    }

    data() {
        let data = {};

        for (let property in this.originalData) {
            data[property] = this[property];
        }
        return data;
    }

    reset() {
        for (let field in this.originalData)
        {
            this[field] = '';
        }

        this.errors.clear();
    }

    submit(requestType,url) {
        return new Promise((resolve,reject) => {
            axios[requestType](url,this.data())
                .then(response => {
                    this.onSuccess(response.data);
                    resolve(response.data);
                })
                .catch(error => {
                    this.onFail(error.response.data.errors);

                    reject(error.response.data.errors);
                });
        });

    }

    onSuccess(data) {
        this.reset();
    }

    onFail(errors) {
        this.errors.record(errors)
    }

    post(url) {
        return this.submit('post',url);
    }
}

constructor为初始化函数，其中this.originalData用于遍历访问field(即name,description).通过for循环赋值，我们可以知道form里面的数据就变成了以下这种情况

this.name = data.name
this.description = data.description

data函数为返回form表单中的数据，data[property] = this[property];其实就是上面这个的反向。
reset函数清空数值，当发布成功后，清空input数值。
submit函数用于提交表单，Promise用来传递异步操作的消息，具体是为了让我们form.post函数能继续调用.then和.catch.

Errors Class

class Errors {
    constructor() {
        this.errors = {};
    }

    get(field) {
        if (this.errors[field])
        {
            return this.errors[field][0];
        }

    }

    has(field) {
        return this.errors.hasOwnProperty(field);
    }

    any() {
        return Object.keys(this.errors).length > 0;
    }

    record(errors) {
        this.errors = errors;
    }

    clear(field) {
        if (field) {
            delete this.errors[field];
            return;
        }

        this.errors = {};

    }
}

errors类通过record将form提交返回的错误信息存入其中，这样我们就可以通过操作这个类，轻松的访问到错误信息。