JSFiddle - React, Tailwind, and code Playground

by Max Sinev

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <awesome-form @form-submit="submit" v-model="obj"></awesome-form>
</div>


<script type="text/x-template" id='awesome-form-template'>
  <form @submit.prevent="$emit('form-submit')">
	<div v-for="(val, key) in value" :key="key">
  <input 
     type="text" 
     :value="value[key]" 
     @input="update(key, $event.target.value)"
     :name="key">
</div>
<button type='submit'>Submit</button>
</form>
</script>

JavaScript

Vue.component('awesome-form', {
  props: ['value'],
  template: `#awesome-form-template`,
  methods: {
    update(key, val) {
      var updatedCopy = Object.assign({}, this.value, { [key]: val });
      this.$emit('input', updatedCopy)
    }
  },
  watch: {
    value(val) {
      console.log('value updated: ' + JSON.stringify(val))
    }
  }
})

var vm = new Vue({
  el: '#app',
  data() { return {
    obj: {
      text1: '123',
      text2: '345'
    }
  }},
  methods: {
      submit() {
         console.log('submitted!');
      }
  }
})