Vue 2.0 入門系列（13）用物件導向的概念去實現任務列表 (2)

心智極客發表於2017-05-02
Vue物件

本節將進一步將表單封裝成類。首先，定義基本的類:

class Form {

    constructor(data) {
        this.originData = data;  //form.data.name

        for (let field in data) {
            this[field] = data[field];  // form.name
        }

        this.errors = new Errors();
    }

}

為了可以通過 form.name 的方式來訪問欄位，因此使用 for 迴圈來對屬性進行賦值。

由於表單的資料以及錯誤訊息現在都通過 form 例項來訪問，因此其他地方也要對應作出修改。

onSubmit(){
    this.$http.post(`/tasks`,this.$data)
      .catch(error => this.form.errors.record(error.response.data));
},

檢視部分也要響應作出更改:

<form method="POST" action="/tasks" @submit.prevent="onSubmit" @keydown="form.errors.clear($event.target.name)">

    <fieldset class="form-group">
        <label for="name">任務名</label>
        <input type="text" class="form-control" id="name" name="name" v-model="form.name">
        <small class="text-danger" v-if="form.errors.has(`name`)"  v-text="form.errors.get(`name`)"></small>
    </fieldset>

    <fieldset class="form-group">
        <label for="description">任務描述</label>
        <input type="text" class="form-control" id="description"  name="description" v-model="form.description">
        <small class="text-danger" v-if="form.errors.has(`description`)" v-text="form.errors.get(`description`)"></small>
    </fieldset>

    <button type="submit" class="btn btn-primary" :disabled="form.errors.any()">建立</button>
</form>

接下來將表單的其他請求都封裝到 Form 中。完整的 Form 類如下

class Form {

    /**
     * 資料初始化
     */
    constructor(data) {
        this.originalData = data;  //form.data.name

        for (let field in data) {
            this[field] = data[field];  // form.name
        }

        this.errors = new Errors();
    }

    /**
     * 重置表單
     */
    reset(){
        for (let field in this.originalData) {
            this[field] = ``;
        }

        this.errors.clear();
    }

    /**
     * 返回表單資料
     * @return {[type]} [description]
     */
    data(){

        let data = {};

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

        return data;
    }

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

    put(url) {
        return this.submit(`put`, url);
    }

    patch(url) {
        return this.submit(`patch`, url);
    }

    delete(url) {
        return this.submit(`delete`, url);
    }

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

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

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

}

使用

onSubmit(){
   this.form.post(`/tasks`)
           .then(message => alert(message))
           .catch(message => console.log(message));
}

相關文章