Vue.js Form class

README.md

Usage

<input type="text" v-model="email">

<input type="text" v-model="username">

<button type="button" @click="save">Save</button>

<button type="button" @click="resetForm">Reset</button>

<button type="button" @click="clearForm">Clear</button>

import Form from './Form.js'

export default {
  
  data() {
    return {
      form: new Form({
        email: '[email protected]',
        username: 'sample',
      })
    }
  },
  
  methods: {

    async save() {
      this.form.post('http://httpbin.org/post')
    },
    
    resetForm() {
      this.form.reset()
    },
    
    clearForm() {
      this.form.clear()
    },
    
  }
}

Form.js

class Form {

  constructor (data) {
    this._originalData = Object.assign({}, data)

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

  reset () {
    for (let key in this._originalData) {
      this[key] = this._originalData[key]
    }
  }

  clear () {
    for (let key in this._originalData) {
      this[key] = null
    }
  }

  async submit (method, url) {
    const response = await fetch(url, {
      method,
      headers: {
        'Accept': 'application/json; charset=utf-8',
        'Content-Type': 'application/json; charset=utf-8',
      },
      body: JSON.stringify(this.data),
    })

    return await response.json()
  }

  async post (url) {
    return await this.submit('POST', url)
  }

  async put (url) {
    return await this.submit('PUT', url)
  }

  async delete (url) {
    return await this.submit('DELETE', url)
  }

}