Vue 2.0 입문 시리즈(13)대상 지향 개념 으로 퀘 스 트 리스트 구현(2)

이 절 은 양식 을 한층 더 분류 로 봉 할 것 이다.우선,기본 클래스 를 정의 합 니 다.

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인 스 턴 스 를 통 해 접근 하고 있 기 때문에 다른 곳 에서 도 수정 해 야 합 니 다.

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

보기 부분 도 변경 사항 에 응답 해 야 합 니 다:

다음은 폼 의 다른 요청 을 모두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));
}