Template for fiddles involving Vue

by Thorsten

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/0.7.11/vue-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment-with-locales.min.js"></script>
<div id="app">
  <h5>Watch the console</h5>
  <my-form :model="originalFormData"></my-form>
  <pre>
    Main Vue instance:
    {{$data | json}}
  </pre>
  <template id="form-template">
    <form>
      <label for="name">Name
        <input id="name" type="text" v-model="formData.name">
      </label>Age
      <label for="age">
        <input id="age" type="number" v-model="formData.age">  
      </label>
     
      <button @click="save" class="button">Save</button>
      <button @click="reset" class="button alert">Reset</button>
      
      <pre>data of form component: {{$data | json}}</pre>
    </form>
  </template>
</div>

Babel + JSX

var Form = Vue.extend({
  template: '#form-template',
  props: {
    'model':{type: Object, required: true}
  },
  data() { 
    return { formData: {name: '', age: 0} } 
  },
  ready() {
  	//you don't have to use props like I did with this.model, you could read from a vuex getter
    this.formData  = JSON.parse(JSON.stringify(this.model))
    console.log('copied info from model prop to local formData')
  },
  methods: {
    save() {
      //dispatch to vuex or whatever you use to hold state
      console.log('Saving formData')
      this.$log('formData')
    },
    reset() {
      // reset the formData to the original values from model.
      console.log('resetting formdata')
      this.formData  = JSON.parse(JSON.stringify(this.model))
      this.$log('formData')
    }
  },
  watch: {
    'formData':{
      deep: true,
      handler() {
        // save the formdata from here for immediate updates if you want that.
        console.log('watch handler: formData Changed!')
        this.$log('formData')
      }
    }
  }
})

var App = new Vue({
  el: '#app',
  data() {
    return {
      originalFormData: {
    		name: 'Linus',
      	age: 34
      }
    }
  },
  components: { 'my-form': Form }
})