Basic VData form

by Admiral Potato

HTML

<script src="https://unpkg.com/@citygro/[email protected]/vdata.js"></script>
<div id="foo">
</div>

JavaScript

const DataFlowMixin = vdata.DataFlowMixin

Vue.component('my-form', {
  props: {
    value: {
      type: Object
    }
  },
  mixins: [DataFlowMixin],
  methods: {
    doChange (evnet) {
      console.log(event)
      this.handleChange(event)
    }
  },
  template: `
    <form>
    <input type="text" :value="value.firstName" @input="handleChange({firstName: $event.target.value})" />
    <input type="text" :value="value.lastName" @input="doChange({lastName: $event.target.value})" />
    <input type="text" :value="value.age" @input="doChange({age: $event.target.value})" />
  </form>
  `
})

new Vue({
  template: '<my-form :value="myData" @input="doTheThing" />',
  data () {
    return {
      myData: {
        firstName: 'Foo',
        lastName: 'Bar',
        age: '42'
      }
    }
  },
  methods: {
    doTheThing (event) {
      console.log(event)
      this.myData = event
    }
  }
}).$mount('#foo')